项目中打包优化

externals

(webpack.docschina.org/configurati…)
防止将某些import的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

在我们的项目中，大部分依赖库是不会改变的
比如vue、Ant、echarts等等，
对于这些基本不会改变的模块，我们希望他们不要影响我们的打包时间和打包后文件的加载速度。

简单讲，就是把我们引入的三方模块声明为外部依赖，webpack不会对其进行打包，最后我们在打包的项目中通过script外链引入即可

vue.config.js

index.html

HappyPack、thread-loader（多进程构建）

（v4.webpack.docschina.org/loaders/thr…
在webpack构建过程中，我们需要使用Loader对js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大的，且这些转换操作不能并发处理文件，而是需要一个个文件进行处理，我们需要的是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。

注：由于HappyPack作者对js的兴趣逐步丢失，所以之后维护将变少，webpack4及之后推荐使用thread-loader

原理：每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker进程中；
HappyPack会将模块进行一个划分，比如我们有多个模块，这些模块交给HappyPack，首先在webpack compiler(钩子)的run方法之后，进程就会到达HappyPack，HappyPack会做一些初始化，初始化之后会创建一个线程池，线程池会将构建任务里面的模块进行一个分配，比如会将某个模块以及它的一些依赖分配给其中的一个HappyPack线程，以此类推，那么一个HappyPack的一个线程池会包括多个线程，这时候线程池的这些线程会各自去处理其中的模块以及它的依赖，处理完成之后会有一个通信的过程，会将处理好的资源传输给HappyPack的一个主进程，完成整个的一个构建过程。

thread-loader
原理：与HappyPack类似，每次webpack解析一个模块，thread-loader会将它及它的依赖分配给worker进程中

vue-cli中是配置parallel

gzip优化

GZIP优点：

减少文件大小。gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实际应用中，并不是对所有文件进行压缩，通常只是压缩静态文件。减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。对于带宽较低的服务器是一种利好，开启后可以加快我们网站的打开速度，原理是经过服务器压缩，客户端浏览器快速解压的原理，可以大大减少了网站的流量。

GZIP缺点：

占用了一些服务器和客户端的CPU，有可能操作失误，会造成网站无法访问，有可能蜘蛛无法进行爬行，造成收录不佳，有些压缩过的文件及图片，展示出来的不是很清楚

目前的带宽一般都充足了，没有必要进行压缩，想要是有效的访问速度，可以采用CDN加速或者购买更高配置服务和带宽，完美解决访问速度慢的问题，要cpu还是要带宽，还是要根据公司具体情况来选择

terser-webpack-plugin 多进程/多实例进行代码压缩（并行压缩）

webpack.docschina.org/plugins/ter…
在代码构建完成之后输出之前有个代码压缩阶段，这个阶段也可以进行并行压缩来达到优化构建速度的目的

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin');

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        //代码压缩插件
        parallel: 4, //开启并行压缩
      }),
    ],
  },

复制代码

watchOptions 监听优化

aggregateTimeout：当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：

ignored：对于某些系统，监听大量文件系统会导致大量的 CPU 或内存占用。这个选项可以排除一些巨大的文件夹，例如 node_modules：

IgnorePlugin

这是webpack内置插件；这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去

比如moment包，打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢，所以，最好能够少打包一些没用的依赖目录进去，而moment的包含’./locale/‘该字段路径的文件目录就是各国语言的目录，比如’./locale/zh-cn’就是中文语言

 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
复制代码

我们虽然按照上面的方法忽略了包含’./locale/’该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录

import moment from 'moment'

//设置语言

//手动引入所需要的语言包
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

const r = moment().endOf('day').fromNow();
console.log(r);
复制代码