Vue发布过程当中遇到坑，以及webpack打包优化

前言

• 这段时间，本人本身作了一个vue画面部署到本身的服务器上，发现运行速度慢的的惊人，虽然服务器很渣（本人没什么钱，只能租最差的服务器，主要是给本身学习用的），可是这样开发出来的网站简直不能用，因此就查阅各类资料和网站，一步一步把代码包优化。这篇文章主要是把我调优的过程记录下来。
• 项目的基础框架是经过TypeScript官网取得的。各类基础框架模版
• 项目的构成 vue + ant-design + mysql + TypeScript
• vue项目地址
• 最后，关于如何在vue里面实现按需加载，请自行查阅相关资料。以及，webpack的基础知识本文也不作介绍，能够参照我github的 学习笔记
• [原文地址](http://shenxf.top/2019/05/16/20190516-vueSpeedUp/)

调优过程

1. 禁用webpack的devtools

• 打包出来的js文件很是大，每一个js文件居然达到了3～4Mbs，这样的体积对于个人服务带宽来讲根本负担不起。打开画面必卡。
• 究其缘由，是由于webpack里面启用了sourceMap，以便于调试。可是这在发布之后就彻底没有用了。
• webpack配置，里面有这句话，把这句话注释掉。本来3～4Mbs的文件，变成了1Mbs文件。压缩了3倍以上。

• // 启用sourceMap
  devtool: '#source-map'

   

2. 抽离css样式等

• 这个虽然对于改善效果不明显，可是好的分类对于发现问题的本质有很大的帮助。另外，css样式分离后要本身进行压缩。

  // *************webpack须要引入的包*************************
  // 抽离css样式
  let MiniCssExtractPlugin = require('mini-css-extract-plugin');
  // 用来压缩分离出来的css样式
  let OptimizeCss =  require('optimize-css-assets-webpack-plugin'); // 用来压缩js let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // *************webpack相关配置部分************************* module.exports = { optimization: { // 优化项  minimizer: [ new OptimizeCss(), // 压缩css new UglifyJsPlugin({ // 压缩js cache: true, // 是否用缓存 parallel: true, // 并发打包 sourceMap: false, // es6 -> es5 转换时会用到  }), ], } // 中间部分省略 // 抽离css样式  plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].css', // 抽离出来样式的名字  }), ], }

   

• 抽离以后，如今项目生成文件的大小是这样。
  JS文件的大小

3. 启用依赖关系可视化工具

• 完成上面工做以后，陷入了茫然，网站仍是很卡，不知道还能怎么调优，在翻阅了不少网站资料之后，发现了一个依赖关系可视化工具，这对于我来讲是一个重大的突破口

  // 依赖关系可视化
  // *************webpack须要引入的包*************************
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  
  // *************webpack相关配置部分*************************
  module.exports = { // 启动依赖关系可视化窗口，绑定端口8919  plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 8919 }), ], }

   

• 从新进行编译之后的效果图
  JS文件的依赖关系图

• 经过这个效果图能够很明显的看出js文件里面包含什么依赖，我就是经过这个线索来进行优化的。

4. 抽离共通部分

• 为了方便我调查，我把共通的依赖部分都抽离出来了。而这个功能是webpack4自带的，若是是以前或者更早版本的webpack，须要引入第三方组件CommonsChunkPlugin这里不作介绍。

  module.exports = {
      optimization: {
          //打包 公共文件
   splitChunks: { cacheGroups: { vendor: { //node_modules内的依赖库 chunks: 'all', test: /[\\/](node_modules)[\\/]/, // 文件路径里面带有node_modules 都抽离出来作共通 name: 'vendor', minChunks: 1, //被不一样entry引用次数(import),1次的话不必提取 maxInitialRequests: 5, minSize: 0, priority: 100, // enforce: true?  }, common: { // ‘src/js’ 下的js文件 chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, //也能够值文件/[\\/]src[\\/]js[\\/].*\.js/, name: 'common', //生成文件名，依据output规则 minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: 'manifest', }, } }

   

• 一开始我对于这个属性的名字难以理解，以致于没有效果,看了下面的文章后全明白了。

  • 公共代码抽取说明

• 效果图以下
  JS文件的依赖关系图2

• JS文件大小
  JS文件大小2

5. 分析包大小问题

• 从上面的依赖效果图能够明显的看出，有几个包特别大，特别显眼
  • ant-design的Icons文件
  • moment文件
  • quill文件
  • highlight.js文件

6. ant-design的Icons文件优化

• 这是ant-design的一个问题
• 而关于上面的问题，我建议大家直接看连接最下面的部分。（上面的一群人聊了半天，不知因此然，各类连接来回跳，也没找到结果）
• 核心的几句话。
  JS解决方案
  TS解决方案
• 经过了本身的理解，一个要本身引入相应的Icon，另外一个是要在webpack里面进行配置

• 增长antdIcon.ts代码，引入相应的Icon

  // 本身项目里面用到的Icon
  export {
      default as FileOutline, } from '@ant-design/icons/lib/outline/FileOutline'; // antd的message组建内部用到的Icon 把源代码复制过来。 // var iconType = { // info: 'info-circle', // success: 'check-circle', // error: 'close-circle', // warning: 'exclamation-circle', // loading: 'loading' // }[args.type] // message info export { default as InfoCircleTwoTone, } from '@ant-design/icons/lib/twotone/InfoCircleTwoTone'; // message success export { default as CheckCircleTwoTone, } from '@ant-design/icons/lib/twotone/CheckCircleTwoTone'; // message error export { default as CloseCircleTwoTone, } from '@ant-design/icons/lib/twotone/CloseCircleTwoTone'; // message warning export { default as ExclamationCircleTwoTone, } from '@ant-design/icons/lib/twotone/ExclamationCircleTwoTone'; // message loading export { default as LoadingOutline, } from '@ant-design/icons/lib/outline/LoadingOutline';

   

• 修改 webpack 配置

  module.exports = {
      resolve: {
          modules: [path.resolve(__dirname, './src'), 'node_modules'], // <- 追加代码
          extensions: ['.ts', '.js', '.vue', '.json'], // <- 追加代码
   alias: { vue$: 'vue/dist/vue.esm.js', '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/tools/antdIcon.ts'), // <- 追加代码  }, plugins: [ // <- 追加代码 new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, './tsconfig.json'), }), ], },

   

• 再一次编译,是否是发现已经看不到Icon了，原本就应该这样，个人项目中根本没用几个Icon
  依赖效果图3

• JS文件的大小,直接减小了500K左右
  JS文件大小3

7. moment文件优化

• 这是个Ant-design内部依赖的语言文件，个人程序里面自己没有引用，我主要用到的是里面的中文，因此，中文之外的我所有在webpack里面设置忽略就好了

  module.exports = {
      plugins: [
          // 只读取（zh-cn）文件。
          new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn)$/), ], }

   

8. quill文件优化

• 这个是我用到的富文本功能，自己对这个组件不太了解，但又必需要用到，也没什么太好优化方法，索性，把它抽离成一个单独的共通JS文件，这样起码有2个组建同时调用这个富文本的状况下，只有第一个掉用的那个须要引入JS文件，第二次的那个会直接利用浏览器的缓存来调用这个JS文件的，也有必定程度的优化效果。

• 因此我修改了抽离共通组件的那部分代码

  module.exports = {
      optimization: {
          splitChunks: {
              cacheGroups: {
                  vendor: {
                      chunks: 'all', test: /[\\/](quill)[\\/]/, // <- 就是简单修改了下匹配规则 name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100, }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: 'manifest', }, } }

   

• 7和8修改以后的效果
  依赖关系效果图4

• 7和8修改以后的JS文件大小
  JS文件大小4

9. highlight.js文件优化

• 这个主要是我用markdown编辑器的时候，用来给文字着色的。没有这个，在编写markdown的时候，内容很是的丑陋。
• 可是这个东西的语法太多了，致使这个包很是的大，我编写的时候，只须要利用其中的几种状况而已，我先随便定几种状况，反正是本身的项目，有不够的之后随时再追加（正式项目的话请作好调研）

• highlight.js官方说明

  // 按需加载的写法
  import hljs from 'highlight.js/lib/highlight';
  import javascript from 'highlight.js/lib/languages/javascript'; hljs.registerLanguage('javascript', javascript);

   

• 改完文件之后再看依赖关系
  依赖关系效果图5

• JS文件大小
  JS文件大小5

• 至此，我以为以我如今的水平代码已经没有什么好调整了，main文件仍是有点大，我也已经尽力了。

10. 服务开启Gzip代码压缩

• 我用的是nginx服务器，它能够开启Gzip，代码压缩率很是可观。200k文件直接被它压缩到几十k。

• 本来还有点小卡的网站，在启用了Gzip以后，变得一点也不卡了。

• 修改nginx配置，这里有个小的坑（最后还给我来一个坑），随便找个网站复制下，大体都长下面这样，最后要重启nginx服务，让它读取最新配置nginx -s reload。若是你用的是docker请输入docker exec -it 容器名字 service nginx reload

  gzip on;
  gzip_min_length  5k;
  gzip_buffers     4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;

   

• 坑在哪里？你本身看吧，说出来都是泪啊坑

• Gzip有啥缺点？ 我也不太清楚，第一应该是它不支持IE6以及IE6如下的浏览器。还有人说他不利于SEO，但也有人说他利于SEO，是真是假去问百度。网上大部分人觉的他的优势大于缺点。

• 谢谢你们。