Vue项目的优化

1. 路由采用懒加载

官方文档：路由懒加载；
before：

after:

2. 配置webpack中externals，将静态资源采用第三方托管

第一步：在webpack.base.conf.js中添加

```
externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'axios': 'axios',
 },
```
#### 第二步：修改html文件，将externals中的引用改成cdn资源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/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.1.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>
  </body>
</html>

第三步：修改main.js文件，取掉element-ui组件

让我们再来看下app.js的大小

是不是小了很多呢？😀

3. 对输出的样式表文件进行压缩：loaderOptionsPlugin，在webpack.base.conf.js中配置

处理 SCSS 文件、或者普通的 CSS，都需要处理对生成的文件进行压缩，特别是在生产环境里。这里就可以使用 loaderOptionsPlugin 对输出的 CSS 文件进行压缩。和 extract-text-webpack-plugin 不同，该插件是一个 Webpack 自带的（built-in）的插件，所以使用的时候可以免去安装的步骤，如下，在 plugins 中添加上就可以：

const Webpack = require('webpack')
......
plugins: [
  // …
  new Webpack.LoaderOptionsPlugin({ 
    minimize: process.NODE_ENV === 'production'（或者直接设置成true，不区分环境）
  })
  // … 
]

设置完成之后，我们再次打包：

又小了11Kb，😀

4.提取公共代码

如果每个页面的代码都将这些公共的部分包含进去，则会造成以下问题：
1.相同的资源被重复加载，浪费用户的流量和服务器的成本。
2.每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。如果将多个页面的公共代码抽离成单独的文件，就能优化以上问题。Webpack内置了专门用于提取多个Chunk中的公共部分的插件CommonsChunkPlugin。

// 所有在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }
}),
// 抽取出代码模块的映射关系
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
}),

重新打包之后，app.js被拆分成 vendor.js 和 manifest.js