webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

时间 2019-11-16

标签 webpack 打包优化四种方法进程压缩资源 cdn 动态 polyfill 栏目网络硬件繁體版

原文原文链接

现在，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，不管你前端走哪条路线，都须要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提升 webpack 的打包速度。css

这篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本为例。html

1、打包分析

1.一、速度分析

咱们的目的是优化打包速度，那确定须要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的做用以下：前端

分析整个打包总耗时
每一个 plugin 和 loader 的耗时状况

首先，安装插件vue

npm i -D speed-measure-webpack-plugin

而后修改 vue.config.js 配置文件（vuecli3+ 版本的配置文件统一在这个文件里修改，若是没有该文件，在根目录新建一个）node

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 实例化插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 这里是本身项目里须要使用到的其余插件
            new yourOtherPlugin()
        ]
    })
}

运行打包命令以后，能够看到，打包总耗时为 2min,51.99s
webpack

1.二、体积分析

分析完打包速度以后，接着咱们来分析打包以后每一个文件以及每一个模块对应的体积大小。使用到的插件为 webpack-bundle-analyzer，构建完成后会在 8888 端口展现大小。ios

首先，安装插件web

npm i -D webpack-bundle-analyzer

修改 vue.config.js 配置文件vue-router

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 实例化速度分析插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 实例化体积分析插件
            new BundleAnalyzerPlugin()
        ]
    })
}

构建以后能够看到，其中黄色块 chunk-vendors 文件占比最大，为 1.34MB
vuex

2、打包优化

2.一、多进程多实例构建，资源并行解析

多进程构建的方案比较知名的有如下三个：

thread-loader (推荐使用这个)
parallel-webpack
HappyPack

这里以 thread-loader 为例配置多进程多实例构建
安装 loader

npm i -D thread-loader

接下来在 vue.config.js 配置文件中使用该 loader

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        }
    })
}

而后看下构建花费的时间， 2min,49.21s，相较于以前提高了 5s

2.二、公用代码提取，使用 CDN 加载

对于vue，vuex，vue-router，axios，echarts，swiper等咱们能够利用webpack的externals参数来配置，这里咱们设定只须要在生产环境中才须要使用。
下面配置 vue.config.js

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

//判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';

//定义 CDN 路径，这里采用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}

// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生产环境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {}
    })
}

紧接着，改造 html 页面。用于让咱们配置的 cdn 路径注入到 html 页面

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 使用 CDN 的 CSS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

 <!-- 使用 CDN 的 JS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>

</html>

最重要的一步，看下效果，能够看到如今耗时 1min，39.19s，整整提高了 1 分多钟！

2.三、多进程多实例并行压缩

并行压缩主流有如下三种方案

使用 parallel-uglify-plugin 插件
uglifyjs-webpack-plugin 开启 parallel 参数
terser-webpack-plugin 开启 parallel 参数（推荐使用这个，支持 ES6 语法压缩）

安装插件依赖

npm i -D terser-webpack-plugin

接下来在 vue.config.js 配置文件中使用插件，最终的配置文件以下

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 导入代码压缩插件
const TerserPlugin = require("terser-webpack-plugin");

// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

//判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';

//定义 CDN 路径，这里采用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}

// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生产环境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {},
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: 4
                })
            ]
        }
    })
}

2.四、使用 polyfill 动态服务

动态 polyfill 指的是根据不一样的浏览器，动态载入须要的 polyfill。 Polyfill.io 经过尝试使用 polyfill 从新建立缺乏的功能，能够更轻松地支持不一样的浏览器，而且能够大幅度的减小构建体积。

Polyfill Service 原理

识别 User Agent，下发不一样的 Polyfill

使用方法：在 index.html 中引入以下 script 标签

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

3、完结

At last，看完以后有什么不懂的，能够留言反馈。

转载请注明出处：https://www.jianshu.com/p/481e7214a134
做者：TSY
我的空间：https://hxkj.vip