我是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
.
Is this normal or did I do something wrong?
我的 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',
},
]
}
}
1 回答
我没有看到您的配置有任何问题,有时webpack需要生成一些运行时代码,可以解释您的包大小的增加 .
但是,您可以通过使用
DefinePlugin
将NODE_ENV
变量设置为production
并利用UglifyjsWebpackPlugin
来减少它,这将导致优化的代码很可能会更小,因此类似于以下内容您还可以将选项
dead_code
指定为uglify,以便它修剪掉从未使用过的代码,这可能对您的情况有所帮助 .此外,你应该完全使用babel-loader和适当的预设摆脱Grunt .