在webpack管理的项目中如果不优化的情况下，webpack打包出来的文件很是庞大，会导致项目在首屏加载的时间过长，体验很不好。以下优化手段不定期更新。

导致打包文件庞大的原因

可以通过配置package.json命令 "analyz": "NODE_ENV=production npm_config_report=true npm run build",运行npm run analyz，即可在很直观的看到造成包庞大的原因。
微信截图_20180623182928.png

路由组件懒加载

把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件，实现路由组件的懒加载。

1
2
3
4
5
6
7
8
9
10
const Full = r => require.ensure([], () => r(require('@/views/Full')), 'Full')

// 路由切换时增加loading
const Full = resolve => {
    Loading.open()
    require.ensure([], () => {
    resolve(require('@/views/Full'))
    Loading.close()
    })
}

CDN引入资源

1 在根目录下的index.html头部引入相关CDN地址。
1
2
3
4
5
6
<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/2.0.8/theme-chalk/index.css">
<script src="//cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/2.0.8/index.js"></script>
2 更改webpack.config.js配置externals如下；本身代码中引入的模块不需要删除，配置过externals后更改webpack会过滤掉。

externals: 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter'
    ...
  }
  ...
}

引入该引入的包

使用Vue的项目更多操作的数据，而不是节点，所以就不必要引入JQuery这类的库及插件。UI框架尽量统一用一个即可，如只是使用到了改UI框架的部分组件，就不要全局引入，应按需引入。

生产环境，去除源码

生产环境不生成sourceMap，sourceMap是用来debug编译后的文件，也就是在服务器上是可以看到源代码的，如果调试及测试都没问题，最后发布生产的时候可省去sourceMap文件。

1
2
3
4
5
vue-cli脚手架config目录下index.js配置文件productionSourceMap设置为false
build：{
    ...
    productionSourceMap：false
}

开启gzip压缩

vue-cli脚手架config目录下index.js配置文件productionGzip设置为true

1
2
3
4
build：{
    ...
    productionGzip：true
}

build/webpack.prod.conf.js 有gzip的详细配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (config.build.productionGzip) {
  var 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
    })
  )
}

CSS 默认压缩文件是可以使用，js需额外配置ngnix才可使用，正确的Response Headers有Content-Enconding: gzip 即配置OK的。

1
2
3
4
conf目录下的nginx.conf

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;