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

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

一、打包分析

1.1、速度分析

我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下:

  • 分析整个打包总耗时
  • 每个 pluginloader 的耗时情况

首先,安装插件

  1. npm i -D speed-measure-webpack-plugin

然后修改 vue.config.js 配置文件 (vuecli3+ 版本的配置文件统一在这个文件里修改,如果没有该文件,在根目录新建一个)

  1. // 导入速度分析插件
  2. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  3. // 实例化插件
  4. const smp = new SpeedMeasurePlugin();
  5. module.exports = {
  6. configureWebpack: smp.wrap({
  7. plugins: [
  8. // 这里是自己项目里需要使用到的其他插件
  9. new yourOtherPlugin()
  10. ]
  11. })
  12. }

运行打包命令之后,可以看到,打包总耗时为 2min,51.99s

1.2、体积分析

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

首先,安装插件

  1. npm i -D webpack-bundle-analyzer

修改 vue.config.js 配置文件

  1. // 导入速度分析插件
  2. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  3. // 导入体积分析插件
  4. const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  5. // 实例化速度分析插件
  6. const smp = new SpeedMeasurePlugin();
  7. module.exports = {
  8. configureWebpack: smp.wrap({
  9. plugins: [
  10. // 实例化体积分析插件
  11. new BundleAnalyzerPlugin()
  12. ]
  13. })
  14. }

构建之后可以看到,其中黄色块 chunk-vendors 文件占比最大,为 1.34MB

二、打包优化

2.1、多进程多实例构建,资源并行解析

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

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

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

安装 loader

  1. npm i -D thread-loader

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

  1. // 导入速度分析插件
  2. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  3. // 实例化插件
  4. const smp = new SpeedMeasurePlugin();
  5. module.exports = {
  6. configureWebpack: smp.wrap({
  7. module: {
  8. rules: [
  9. {
  10. test: /\.js$/,
  11. use: ['thread-loader']
  12. }
  13. ]
  14. }
  15. })
  16. }

然后看下构建花费的时间, 2min,49.21s,相较于之前提升了 5s

2.2、公用代码提取,使用 CDN 加载

对于vue,vuex,vue-router,axios,echarts,swiper等我们可以利用webpack的externals参数来配置,这里我们设定只需要在生产环境中才需要使用。

下面配置 vue.config.js

  1. // 导入速度分析插件
  2. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  3. // 导入体积分析插件
  4. const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  5. //判断是否为生产环境
  6. const isProduction = process.env.NODE_ENV === 'production';
  7. //定义 CDN 路径,这里采用 bootstrap 的 cdn
  8. const cdn = {
  9. css: [
  10. 'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
  11. ],
  12. js: [
  13. 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
  14. 'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
  15. 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
  16. 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
  17. 'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
  18. 'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
  19. ]
  20. }
  21. // 实例化插件
  22. const smp = new SpeedMeasurePlugin();
  23. module.exports = {
  24. chainWebpack: config => {
  25. // 生产环境配置
  26. if (isProduction) {
  27. // 生产环境注入 cdn
  28. config.plugin('html')
  29. .tap(args => {
  30. args[0].cdn = cdn;
  31. return args;
  32. });
  33. }
  34. },
  35. configureWebpack: smp.wrap({
  36. module: {
  37. rules: [
  38. {
  39. test: /\.js$/,
  40. use: ['thread-loader']
  41. }
  42. ]
  43. },
  44. plugins: [
  45. new BundleAnalyzerPlugin()
  46. ],
  47. //生产环境注入 cdn
  48. externals: isProduction && {
  49. 'vue': 'Vue',
  50. 'vuex': 'Vuex',
  51. 'vue-router': 'VueRouter',
  52. 'axios': 'axios',
  53. 'echarts': 'echarts',
  54. 'swiper': 'Swiper'
  55. } || {}
  56. })
  57. }

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <!-- 使用 CDN 的 CSS 文件 -->
  8. <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  9. <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  10. <% } %>
  11. </head>
  12. <body>
  13. <noscript>
  14. <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  15. </noscript>
  16. <div id="app"></div>
  17. <!-- built files will be auto injected -->
  18. <!-- 使用 CDN 的 JS 文件 -->
  19. <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  20. <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  21. <% } %>
  22. </body>
  23. </html>

最重要的一步,看下效果,可以看到现在耗时 1min,39.19s,整整提升了 1 分多钟!

2.3、多进程多实例并行压缩

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

  • 使用 parallel-uglify-plugin 插件
  • uglifyjs-webpack-plugin 开启 parallel 参数
  • terser-webpack-plugin 开启 parallel 参数 (推荐使用这个,支持 ES6 语法压缩)

安装插件依赖

  1. npm i -D terser-webpack-plugin

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

  1. // 导入速度分析插件
  2. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  3. // 导入代码压缩插件
  4. const TerserPlugin = require("terser-webpack-plugin");
  5. // 导入体积分析插件
  6. const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  7. //判断是否为生产环境
  8. const isProduction = process.env.NODE_ENV === 'production';
  9. //定义 CDN 路径,这里采用 bootstrap 的 cdn
  10. const cdn = {
  11. css: [
  12. 'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
  13. ],
  14. js: [
  15. 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
  16. 'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
  17. 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
  18. 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
  19. 'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
  20. 'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
  21. ]
  22. }
  23. // 实例化插件
  24. const smp = new SpeedMeasurePlugin();
  25. module.exports = {
  26. chainWebpack: config => {
  27. // 生产环境配置
  28. if (isProduction) {
  29. // 生产环境注入 cdn
  30. config.plugin('html')
  31. .tap(args => {
  32. args[0].cdn = cdn;
  33. return args;
  34. });
  35. }
  36. },
  37. configureWebpack: smp.wrap({
  38. module: {
  39. rules: [
  40. {
  41. test: /\.js$/,
  42. use: ['thread-loader']
  43. }
  44. ]
  45. },
  46. plugins: [
  47. new BundleAnalyzerPlugin()
  48. ],
  49. //生产环境注入 cdn
  50. externals: isProduction && {
  51. 'vue': 'Vue',
  52. 'vuex': 'Vuex',
  53. 'vue-router': 'VueRouter',
  54. 'axios': 'axios',
  55. 'echarts': 'echarts',
  56. 'swiper': 'Swiper'
  57. } || {},
  58. optimization: {
  59. minimizer: [
  60. new TerserPlugin({
  61. parallel: 4
  62. })
  63. ]
  64. }
  65. })
  66. }

2.4、使用 polyfill 动态服务

动态 polyfill 指的是根据不同的浏览器,动态载入需要的 polyfillPolyfill.io 通过尝试使用 polyfill 重新创建缺少的功能,可以更轻松地支持不同的浏览器,并且可以大幅度的减少构建体积。

Polyfill Service 原理

识别 User Agent,下发不同的 Polyfill

使用方法:在 index.html 中引入如下 script 标签

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

三、完结

At last,看完之后有什么不懂的,可以留言反馈。

转载请注明出处:https://www.jianshu.com/p/481e7214a134

作者:TSY

个人空间:https://hxkj.vip

webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)的更多相关文章

  1. ipa包如何打包?ios打包ipa的四种方法分享

      今天带来的内容是ios打包ipa的四种方法.总结一下,目前.app包转为.ipa包的方法有以下几种,下面一起来看看吧!    1.Apple推荐的方式,即实用xcode的archive功能 Xco ...

  2. 运行jar应用程序引用其他jar包的四种方法

    转载地址:http://www.iteye.com/topic/332580 大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个ja ...

  3. 用MATLAB结合四种方法搜寻罗马尼亚度假问题

    选修了cs的AI课,开始有点不适应,只能用matlab硬着头皮上了,不过matlab代码全网仅此一份,倒有点小自豪. 一.练习题目 分别用宽度优先.深度优先.贪婪算法和 A*算法求解"罗马利 ...

  4. (转)运行jar应用程序引用其他jar包的四种方法 -- ClassLoader应用

    转:http://longdick.iteye.com/blog/332580 大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个j ...

  5. JAVA实现单例模式的四种方法和一些特点

    JAVA实现单例模式的四种方法和一些特点,需要的朋友可以参考一下     一.饿汉式单例类 复制代码 代码如下: public class Singleton  {      private Sing ...

  6. 两个变量交换的四种方法(Java)

    对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) class TestEV //创建一个类 { public static ...

  7. 织梦DedeCMS模板防盗的四种方法

    织梦(DedeCMS)模板也是一种财富,不想自己辛辛苦苦做的模板被盗用,在互联网上出现一些和自己一模一样的网站,就需要做好模板防盗.本文是No牛收集整理自网络,不过网上的版本都没有提供 Nginx 3 ...

  8. 让一个图片在div中居中(四种方法)

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

  9. java中定时器的四种方法

    package com.lid; import java.util.Calendar; import java.util.Date; import java.util.Timer; import ja ...

随机推荐

  1. 运维自动化神器ansible之user模块

    运维自动化神器ansible之user模块 一.概述   user模块 可管理远程主机上的 用户,比如创建用户.修改用户.删除用户.为用户创建密钥对等操作. 二.参数介绍   name: 用于指定操作 ...

  2. 本人亲测-SSM环境搭建(使用eclipse作为示例,过程挺全的,可作为参考)

    本人亲测-SSM环境搭建(使用eclipse作为示例,过程挺全的,可作为参考) 本人亲测-SSM环境搭建(使用eclipse作为示例,过程挺全的,可作为参考) 本人亲测-SSM环境搭建(使用eclip ...

  3. 设计模式常见面试知识点总结(Java版)

    设计模式 这篇总结主要是基于我设计模式系列的文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以到我的cdsn博客上查看: https:// ...

  4. 简单自定义mybatis流程!!

    ----简单自定义mybatis流程----一.首先封装daoMapperxml文件和sqlMapconfig配置文件,如何封装:(1).封装我们的Mapper.xml文件,提取名称空间namespa ...

  5. python selenium下拉框定位

    一.前言 总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...

  6. feof() 函数判断不准确的问题

    大家在读文件时应该碰到过这样的问题,while(!feof(fp)) 函数在读文件时会多循环一次,导致 fscanf() 函数多读了一次文件. 所以也就在输出的时候会产生一些乱码. 可以看看下面的代码 ...

  7. Canvas动画基础之碰撞检测

    在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...

  8. i春秋DMZ大型靶场实验(四)Hash基础

    下载工具包  打开目标机 通过目录爆破发现 phpmyadmin    在登录位置尝试注入 返现 可以注入 直接上sqlmap    上 bp 代理抓包 sqlmap.py  -r  bp.txt  ...

  9. Lab_1:练习一——理解通过make生成执行文件的过程

    参考网站: https://www.cnblogs.com/chaunceyctx/p/7188779.html https://cloud.tencent.com/developer/article ...

  10. 委托事件(jQuery)

    <div class="content"> <ul> <li>1</li> <li>2</li> <l ...