Я новичок в Vue и Grunt/Gulp/Webpack. Я получил приложение Vue, чтобы нормально работать (Grunt: browserify → babel → uglify) с настройкой, подобной этой:
// app.js
const LoginComponent = require('./login.js')
// login.js
const template = '<some html>'
module.exports = Vue.component('login-component', {
template: template,
// component stuff
})
Затем, чтобы сделать мои компоненты более читабельными, я переключился на отдельные компоненты файлов (Webpack, Grunt: babel → uglify) и перешел все, чтобы работать следующим образом:
// app.js
import LoginComponent from './login.js'
// login.js
<template>
<some html>
</template>
<script>
export defalut {
// component stuff
}
</script>
Проблема в том, что при использовании webpack размер файла удваивается. Первая настройка привела к app.min.js
3.3kb
, а вторая настройка с webpack была 7.0kb
.
Это нормально или я сделал что-то неправильно?
Мой webpack.config.js
выглядит так:
var path = require('path')
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'resources/js/temp')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
]
}
}
Я не вижу ничего плохого в вашем конфиге, иногда webpack должен генерировать некоторый код времени выполнения, который может объяснить увеличение размера вашего пакета.
Однако вы можете уменьшить его с помощью DefinePlugin
чтобы установить переменную NODE_ENV
в production
и использовать UglifyjsWebpackPlugin
, это приведет к оптимизации кода, который, скорее всего, будет меньше, поэтому примерно следующее
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'resources/js/temp')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') },
}),
new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
]
}
Вы также можете указать параметр dead_code
для uglify, чтобы он обрезал код, который никогда не используется, что может помочь в вашем случае.
Кроме того, вы должны полностью избавиться от Grunt, используя загрузчик babel и соответствующие пресеты.