Как ускорить процессы командной строки Vue. js и оптимизировать сборку веб-пакета - PullRequest
0 голосов
/ 13 января 2020

У меня есть очень простой учебный проект, который я построил, который состоит не более чем из 100-200 строк кода.

Когда я строю этот проект с помощью веб-пакета, я получаю пакет. js файл который помечен как превышающий рекомендуемый размер файла пакета. js. Я нахожу это тревожным, потому что я знаю, что мой код очень маленький. Как получается, что с использованием всего лишь нескольких вещей, таких как vuex, vue. js и нескольких узловых модулей, заканчивающихся таким большим пакетом. js?

Я понимаю, что он упаковывает все для нас, но мне трудно поверить, что с таким небольшим проектом веб-пакет не сможет получить его гораздо меньшего размера. Я обеспокоен тем, что это может иметь какое-то отношение к самому количеству узловых модулей, которые у меня есть в этом каталоге root проекта.

Поэтому мой вопрос заключается в следующем: зависит ли сборка веб-пакета вообще от того, какой узел- модули находятся в моем каталоге в папке / node_modules /? Если нет, то как я уже превысил рекомендованный размер для пакета? js с моим первым в истории vue проектом?

Это подводит меня к другому вопросу, в котором я очень не уверен: нормально для vue копировать почти весь мой каталог node_modules из моего root пользовательского каталога? Когда я смотрю учебные пособия, команда "vue create My_App", кажется, завершается sh и выполняется не более чем за 10-20 секунд, но когда я запускаю команду, это может занять минуты. Когда мне стало интересно, что это может быть, я увидел, что он скопировал сотни и сотни узловых модулей ... это совершенно необходимо? Есть ли какая-то конфигурация или настройка, которую я должен был установить или изменить, которую я пропустил?

Спасибо всем за понимание, которое вы можете предложить, большое или маленькое.

    // webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin(),
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...