【进击的Vue(四)】webpack打包优化

不要让自己的底限成为你的上限

本文主要讲以下内容。webpack-bundle-analyzer占用统计查看所有的文件占用情况，使用在线cdn替换本地导入的包，使用clean-webpack-plugin清除webpack打包残留。

webpack-bundle-analyzer资源占用统计

使用webpack-bundle-analyzer插件查看项目文件资源占用情况。效果如下图所示：

) 可以看到主要还是vue、vuex和axios占的资源比较多（虽然说只装了这几个。。。）

先上插件，安装：

npm i webpack-bundle-analyzer -D

然后配置webpack.config.js，这里按照自己的习惯进行配置，怎么舒服怎么来：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      // 8888是默认端口号
      analyzerPort: 8888,
      // host地址
      analyzerHost: '127.0.0.1',
      /**
       * 'server', 'static', 'json', 'disabled'
       * server => http服务显示
       * static => 静态文件
       * json => 将分析结构以 json 形式输出
       * disabled => 不做任何行为
       * 这里按照我的习惯是在开发的时候自动打开浏览器查看统计，打包的时候输出在dist下
       */
      analyzerMode: 'static',
      // analyzerMode为static或json时候的输出位置
      reportFilename: 'report.html',
      /**
       * 'stats', 'parsed', 'gzip'
       * stats => 开发环境中
       * parsed => 打包后
       * gzip => gzip后
       */
      defaultSizes: 'parsed',
      // 是否自动打开统计页面
      openAnalyzer: false,
      // generateStatsFile: false, // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成。
      // statsFilename: 'stats.json',
      /**
       * 配置
       * https://webpack.js.org/configuration/stats/#stats-options
       */
      statsOptions: null,
      /**
       * 'info', 'warn', 'error', 'silent'
       */
      logLevel: 'info',
      // 用于排除分析一些文件
      excludeAssets: null
    })
  ]
}

然后启动测试出现上面那种图就成功了，然后接下来优化。

使用在cdn在线资源

值得注意的是，有些插件会有提供开发环境的cdn资源，这些带开发环境的cdn可以提示你一些开发中的错误（虽然这些错误毫无影响。。），可以根据自己的取舍去选择。

编辑你的默认index.html模板，加入在线资源：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
</body>
</html>

然后配置webpack.config.js外部扩展，不知道导入的插件函数名可以打开源码看看。

module.exports = {
...
  // 外部扩展。
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'Axios',
    qs: 'Qs'
  }
  ...
}

配置完毕，直接一键卸载项目中的库吧：

npm uninstall vue vuex vue-router axios qs

然后重新启动项目，项目这时候开始报错，不要紧，把原先import进来的vue、vuex-vue-router、axios、qs全都注释掉。比如main.js：

...
- import Vue from 'vue';
+ // import Vue from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
- import axios from 'axios';
+ // import axios from 'axios';
import * as filters from './filter';
import './less/common.less';

Vue.prototype.$http = axios;
...

🐛：更新内容

如果还有报错，请检查以下情况

如果是报的eslint的错误，增加//eslint-disable-next-lineno-undef
检查是否还有其它地方的文件是import进入的
检查externals导入的插件key值是否和npm install 的时候一致

注释掉原有的import vue from vue等主要是为了保证使用外部（cdn）依赖（库）。

clean-webpack-plugin打包清除原有的dist文件夹

clean-webpack-plugin用于删除清理你生成的文件夹，在最新的版本中默认清除dist文件夹，而在旧版本的使用方法会在下方注释中提到。

安装clean-webpack-plugin

npm i clean-webpack-plugin -D

修改webpack.config.js文件。

const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
...
module.export = {
  plugins: [
    /**
     * 旧版本需要带入文件夹名称
     * new CleanWebpackPlugin(['dist'])
     */
    new CleanWebpackPlugin()
  ]
}

文章到这里就结束，vue项目搭建会上传到GitHub，需要的朋友可以自行拉取，后面的文章会以此为基础。如果有需要优化的地方或者有更好的建议可以在评论区留言（假装很多人看）。 Github仓库：github.com/heiyehk/web…
代码分支在: /tree/dev/20200625-webpackBuildOptimize