Vue项目的优化

时间 2019-11-06

标签 vue 项目优化繁體版

原文原文链接

1. 路由采用懒加载

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

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的大小html

是否是小了不少呢？😀vue

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

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

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

设置完成以后，咱们再次打包：webpack

又小了11Kb，😀

4.提取公共代码

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

// 全部在 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.jsweb