webpack打包首页加载文件过大
我们项目是主要是使用Vue + elementUI + webpack,打包出来首页加载太慢,做了一些优化。
- 路由组件按需加载
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
2.部分插件使用CDN引入
首先,在webpack.base.conf.js里 module.exports中的externals中定义使用CDN引入的插件,
externals: {
'vue': 'Vue',
'Axios': 'axios',
'moment': 'moment',
'element-ui': 'ELEMENT'
},
然后,在index.html 中直接引入上面这些插件即可。
3.使用 compression-webpack-plugin 插件进行 Gzip压缩,这一点能大幅提升加载速度,需要运维配合,改下nginx的配置 , 启用gzip压缩并 开启gzip_static。
首先,设置productionGzip: true
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
4.打包时去掉sourceMap文件
修改 vue.config.js 配置
module.exports = {
productionSourceMap: false
}