【实战篇】基于vue-cli创建的项目进行打包优化

一、前言

阅读完该文章大概需要2.5min。

• 读完该篇文章你能学到

  1. vue-cli默认做了哪些优化？
  2. 在cli的基础上我们又能做哪些优化？
  3. vue.config.js中如何配置一些常用的plugin和loader

• vue-cli的出现，让我们省掉了配置webpack的时间。也就是说，一个不懂webpack的人，也能直接上手开发。比如file-loader, url-loader会提前为我们配置好。

• 性能方面，vue-cli也默认尽可能多的帮我们做了优化，比如cache-loader会在项目中预先做了配置。我们可以在控制台输入vue inspect > webpack.config.js，即可在webpack.config.js文件中查看cli预先定义好的基础配置。我们今天就在vue-cli搭建好的项目基础上聊一聊可优化的点。

二、项目源码

本文所用到的项目源码

三、量化指标

1. build时间

speed-measure-webpack-plugin插件可以在build的时候看到webpack的loader和plugin所用的时间，配置非常简单。如下：

// vue.config.js
module.exports = {
   
chainWebpack: config => {
   
   config.plugin('speed')
   .use(SpeedMeasureWebpackPlugin)
 }
}

顺便看一下效果

2.build后包的大小以及包的多少

webpack-bundle-analyzer插件可以帮我们可视化的展示build时的每个包的大小以及依赖。vue-cli也帮我们做了默认的配置，我只需要在build的后面加一个参数–report即可。

// package.json
{
   
  "name": "dll-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report",
  }
}

npm run report 之后，dist目录下就多了一个report.html文件，我们用浏览器打开这个文件看一下，右上角那个小蓝块是我们的vue代码，接下来我们主要来优化小蓝块之外的代码

四、开始优化

1. include/exclude

我们通常配置include和exclude，来达到使loader仅仅处理匹配到的文件，像这样

// webpack.config.js
module.exports = {
   
  module: {
    
      rules: [ 
          {
    
              test: /\.js[x]?$/, 
              use: ['babel-loader'], 
              include: [path.resolve(__dirname, 'src')] 
          }
         ] 
  }