路由懒加载
const Home = () => import('./views/Home.vue');
const MyInfo = () => import('./views/MyInfo.vue');
在.babelrc中
"plugins": ["@babel/plugin-syntax-dynamic-import"]
分离公共代码
webpack 3.x
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
// 翻译注释:所有被依赖的模块,如果它在node_modules目录中,都会被抽离出来放进 vendor.js 中
// 如果模块有一个路径,而且在路径中有 js 文件,并且这个模块是属于 node_modules 中的模块
// 那这个模块就会被抽离出来,放进名为 vendor 的这个chunk
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
webpack 4.x
optimization与output同级
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
chunks: 'async',
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
// chunks 有三个可选值,”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks,所需要的chunks 还是所有chunk
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /[\\/]node_modules[\\/]/
}
}
}
},
css懒加载
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
该插件需要webpack 4.x
//sass
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
},
plugins中:
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}),
CDN引入
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
webpack.base.conf.js中
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'vant': 'vant'
},
externals与output同级。
删掉项目中import的这几个相关的,以及Vue.use()。eslint插件报错not defined的话,前面加个window,如window.VueRouter。
js压缩、css压缩
这个就不说了。
推荐使用webpack 4.x,在production模式下有Tree Shaking和Scope Hoisting。
如果还是过大,可以使用下面插件:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin()
]
它会生成一个分析图,你的文件里包含了哪些文件,打包后,它会自动在浏览器中打开。