webpack+vue首页加载慢，打包优化

webpack打包首页加载文件过大

我们项目是主要是使用Vue + elementUI + webpack,打包出来首页加载太慢，做了一些优化。

1. 路由组件按需加载

{
    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
}