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

时间 2020-06-29

标签进击的Vue(四) webpack 打包优化繁體版

原文原文链接

不要让本身的上限成为你的底线html

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

webpack-bundle-analyzer资源占用统计

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

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

先上插件，安装：ios

npm i webpack-bundle-analyzer -D
复制代码

而后配置webpack.config.js，这里按照本身的习惯进行配置，怎么舒服怎么来：git

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
    })
  ]
}
复制代码

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

使用在cdn在线资源

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

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

<!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外部扩展，不知道导入的插件函数名能够打开源码看看。vue-router

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

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

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;
...
复制代码

若是还有报错请检查是否还有其它地方的文件是import进入的

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