У меня есть очень простой учебный проект, который я построил, который состоит не более чем из 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()],
},
};