这次给大家带来怎样把webpack4.0打包优化,webpack4.0打包优化的注意事项有哪些,下面就是实战案例,一起来看一下。

webapck4 新特性介绍-参考资料

当前依赖包的版本

怎样把webpack4.0打包优化

1.优化loader配置

1.1 缩小文件匹配范围(include/exclude)

通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件

module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录 include: path.resolve(dirname, 'src') // 精确指定要处理的目录 } ] }

1.2 缓存loader的执行结果(cacheDirectory)

cacheDirectory是loader的一个特定的选项,默认值是false。指定的目录(use: 'babel-loader?cacheDirectory=cacheLoader')将用来缓存loader的执行结果,减少webpack构建时Babel重新编译过程。如果设置一个空值(use: 'babel-loader?cacheDirectory') 或true(use: 'babel-loader?cacheDirectory=true') 将使用默认的缓存目录(node_modules/.cache/babel-loader),如果在任何根目录下都没有找到 node_modules 目录,将会降级回退到操作系统默认的临时文件目录。

module: { rules: [ { test: /\.js$/, use: 'babel-loader?cacheDirectory', // 缓存loader执行结果 发现打包速度已经明显提升了 exclude: /node_modules/, include: path.resolve(dirname, 'src') } ] }

2.resolve优化配置

2.1 优化模块查找路径 resolve.modules

Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(alias)的配置,亦当如此:

怎样把webpack4.0打包优化

const path = require('path'); function resolve(dir) { // 转换为绝对路径 return path.join(dirname, dir); } resolve: { modules: [ // 优化模块查找路径 path.resolve('src'), path.resolve('node_modules') // 指定node_modules所在位置 当你import 第三方模块时 直接从这个路径下搜索寻找 ] }

配置好src目录所在位置后,由于util目录是在src里面 所以可以用下面方式引入util中的工具函数

// main.js import dep1 from 'util/dep1'; import add from 'util/add';

2.2 resolve.alias 配置路径别名

创建 import 或 require 的路径别名,来确保模块引入变得更简单。配置项通过别名来把原导入路径映射成一个新的导入路径 此优化方法会影响使用Tree-Shaking去除无效代码

例如,一些位于 src/ 文件夹下的常用模块:

alias: { Utilities: path.resolve(dirname, 'src/utilities/'), Templates: path.resolve(dirname, 'src/templates/') }

现在,替换「在导入时使用相对路径」这种方式,就像这样:

import Utility from '../../utilities/utility';

你可以这样使用别名:

import Utility from 'Utilities/utility';resolve: { alias: { // 别名配置 通过别名配置 可以让我们引用变的简单 'vue$': 'vue/dist/vue.common.js', // $表示精确匹配 src: resolve('src') // 当你在任何需要导入src下面的文件时可以 import moduleA from 'src/moduleA' src会被替换为resolve('src') 返回的绝对路径 而不需要相对路径形式导入 } }

也可以在给定对象的键后的末尾添加 $,以表示精准匹配:

alias: { util$: resolve('src/util/add.js') }

这将产生以下结果:

import Test1 from 'util'; // 精确匹配,所以 src/util/add.js 被解析和导入 import Test2 from 'util/dep1.js'; // 精确匹配,触发普通解析 util/dep1.js

2.3resolve.extensions

当引入模块时不带文件后缀 webpack会根据此配置自动解析确定的文件后缀

后缀列表尽可能小

频率最高的往前放

导出语句尽可能带上后缀

resolve: { extensions: ['.js', '.vue'] }

3.module.noParse

用了noParse的模块将不会被loaders解析,所以当我们使用的库如果太大,并且其中不包含import require、define的调用,我们就可以使用这项配置来提升性能, 让 Webpack 忽略对部分没采用模块化的文件的递归解析处理。

// 忽略对jquery lodash的进行递归解析 module: { // noParse: /jquery|lodash/ // 从 webpack 3.0.0 开始 noParse: function(content) { return /jquery|lodash/.test(content) } }

4.HappyPack

HappyPack是让webpack对loader的执行过程,从单一进程形式扩展为多进程模式,也就是将任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。从而加速代码构建 与 DLL动态链接库结合来使用更佳。

npm i happypack@next -D

webpack.config.js

const HappyPack = require('happypack'); const os = require('os'); // node 提供的系统操作模块 // 根据我的系统的内核数量 指定线程池个数 也可以其他数量 const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().lenght}) module: { rules: [ { test: /\.js$/, use: 'happypack/loader?id=babel', exclude: /node_modules/, include: path.resolve(dirname, 'src') } ] }, plugins: [ new HappyPack({ // 基础参数设置 id: 'babel', // 上面loader?后面指定的id loaders: ['babel-loader?cacheDirectory'], // 实际匹配处理的loader threadPool: happyThreadPool, // cache: true // 已被弃用 verbose: true }); ]

happypack提供的loader,是对文件实际匹配的处理loader。这里happypack提供的loader与plugin的衔接匹配,则是通过id=happypack来完成。

npm run dev

5.DLL动态链接库

在一个动态链接库中可以包含其他模块调用的函数和数据,动态链接库只需被编译一次,在之后的构建过程中被动态链接库包含的模块将不会被重新编译,而是直接使用动态链接库中的代码。

将web应用依赖的基础模块抽离出来,打包到单独的动态链接库中。一个链接库可以包含多个模块。

当需要导入的模块存在于动态链接库,模块不会再次打包,而是去动态链接库中去获取。

页面依赖的所有动态链接库都需要被加载。

5.1 定义DLL配置

依赖的两个内置插件:DllPlugin 和 DllReferencePlugin