所谓的优化，也就是引入一些插件，使得代码的体积变小。
1. 删除没有意义的样式
在css文件中有一些没有用到的样式，希望在打包的过程中 删除掉它们。
安装两个插件 cnpm install purgecss-webpack-plugin glob --save-dev
glob库：主要功能是查找匹配的文件
// 查找src文件夹下的所有文件夹的所有文件。
// {nodir: true} 不包含文件夹
/*
src-- index.js
-- index.css
-- index.html
-- a
-- index.js
*/
const glob = require('glob')
let paths = glob.sync("./src/**/*",{nodir: true})
/*
[ './src/a/index.js',
'./src/index.css',
'./src/index.html',
'./src/index.js' ]
*/
const glob = require('glob')
// 只要作用是删除没有意义的css。但不能在style标签中删除，只能配合 mini-css-extract-plugin 插件使用，先抽离css再去优化。
const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')
plugins: [
new PurgecssWebpackPlugin({
paths: glob.sync("./src/**/*",{nodir: true})
// glob.sync(["./src/**/*","!x.js"],{nodir: true}) 忽略x.js文件
})
]
2. 图片优化
安装loader cnpm install image-webpack-loader --save-dev。
image-webpack-loader 要配置在 file-loader 之后
module: [
{
test: /\.(jpe?g | png | gif)/,
use: [
{
loader: 'file-loader'
},
{
loader: 'image-webpack-loader',
// options 配置格式固定。
options: {
// 对关于一些图片清晰度的设置。
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}
]
3. CDN引入文件加载
这里在index.html中引入了jq的cdn版，可直接使用$，但为了防止因为直接使用 $ 而产生 来源的疑惑，我们需要手动import jquery, 但是的话，这样 webpack 会在 俩个文件中各打包一次jq。所以 我们还需要进行配置。
// index.html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// index.js
import $ from 'jquery'; // => 表明来源，但不打包
console.log($)
// webpack.config.js
module.exports = {
externals: {
'jquery': '$' // 不去打包代码里的jquery (脱离webpack打包，不被打入bundle中)
}
}
如果引入的 cnd文件 有点多的话，一个一个的引太麻烦，可以使用 插件 add-asset-html-cdn-webpack-plugin。注意 它是 基于 html-webpack-plugin 的。
但是：我用的时候这个插件不能用，不知道为啥，可能是版本的原因，毕竟是1.0版本。
我们改用webpack-cdn-plugin 代替它，配置也很简单。
// webpack.config.js
let AddCdnPlugin = require('add-asset-html-cdn-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
}),
// 添加cnd的插件
/*
new AddCdnPlugin(true,{
'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'
})
*/
new WebpackCdnPlugin({
modules: [
{
name: 'jquery',
path: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js'
}
]
})
]
4. Tree-Shaking
‘摇晃树’，作用是 去除掉 js 中多余的代码。并且只支持es6，webpack内置的。
es6 import导入语法为静态导入，require为动态导入，所谓动态导入，就是可以在一些判断语句中可以导入。 if(){ require('...') }。
tree-shaking 只能在 生产环境下使用。
删除’副作用’代码：在package.json 中添加 sideEffects: false，只要引入的没有用到，就被删除。但是，如果只单纯写 false，那么引入的 import './index.css' 也会被 tree-shaking掉。
// webpack.config.js
optimization: {
usedExports: true // 使用了哪个模块你说一下。
}
// calc.js
export const add = (a,b) => {
return a + b + 'add'
}
export const re = (a,b) => {
return a - b + 're'
}
// test.js
function test(){
return '123'
}
console.log(test())
export default test
// index.js
import {add} from './ache';
// 在 引入的 test 文件 中 内部 代码自己执行，导入的 test 应该是没用的代码，不过webpack依然认为它是有用的。我们需要手动处理这样的代码。
import test from './test' // 副作用代码，可能开发的时候是无意义的。应该被删。
import './index.css' // package.json 里 "sideEffects"：["**/*.css",...],声明他不是副作用代码。
console.log(add())
5. Scope hoisting
作用域提升，减少作用域。它也是webpack内置的，不需要配。
因为每个模块导出的都是一个函数。
6. DLL打包
在打包的过程中，例如 react，react-dom 每一次webpack都会重新进行打包，我们希望，可以将 react，react-dom 这类固定文件提前打包好，当下一次打包的时候，直接去打包其他的代码即可，react，react-dom 可以直接拿出来用。
webpack默认打包之后的代码形式是这样的：
// module.exports = 'hello world'
(function () {
return 'hello world'
})()
// 代码是一个自执行函数
// 当我们在 output 配置中 配置 library：xxx，则会把导出的结果赋值给 xxx。
// let xxx = (function(){...})()
// 除了 library 之外，还有 libraryTarget ，根据变量使用的环境来选择你需要的模式,（var,commonjs,commonjs2,...）
以 raect react-dom 为例 ，生成一个只有 react，react-dom 的文件。
// 新建一个webpack.xxx.js (这里以webpack.dll.js为例)
// webapck.dll.js
const path = require('path');
module.exports = {
mode: 'development',
entry: ['react','react-dom'],
output: {
library: 'react', // 打包后接受自执行函数的名字叫ache
// libraryTarget: 'commonjs2',
filename: 'react.dll.js',
path: path.resolve(__dirname,'dll')
}
}
// package.json
"ache": "webpack --config ./webpack.dll.js"
然后，配置DLLPlugin插件，生成manifest.json文件。我们叫这个文件为缓存列表，通过这个缓存列表可以找到对应需要的 模块( react, react-dom )
const DLLPlugin = request('webpack').DLLPlugin
const path = require('path');
const DLLPlugin = require('webpack').DllPlugin
module.exports = {
mode: 'development',
entry: ['react','react-dom'],
output: {
library: 'react', // 打包后接受自执行函数的名字叫ache
// libraryTarget: 'commonjs2',
filename: 'react.dll.js',
path: path.resolve(__dirname,'dll')
},
plugins: [
new DLLPlugin({
name: 'react', // 暴露函数的名字。这里的name必须要与dll.js中函数名保持一致。
path: path.resolve(__dirname,'dll/manifest.json') // manifest.json 文件的绝对路径
})
]
}
// 我本地使用了 import React 语法，需要先去 manifest.json查找，找到后会加载对应的库的名字，可能会引用某个模块，会去dll.js文件查找。
然后，引入DLL引用插件，让在打包的时候去找minifest.json文件。
// webpack.config.js
const DLLReferencePlugin= require('webpack').DLLReferencePlugin;
plugins:[
new DLLReferencePlugin({
// 我打包 react ，会先去manifest.json文件中查找，找到后再去找真实的文件（dll.js）。
manifest: path.resolve(__dirname,'dll/manifest.json')
}),
...
]
通过上面以及配置差不多了，但是通过 manifest.json，会去找 name 对应 dll.js文件中的 变量，发现 dll.js文件包 没有被引入，找不到 react。
手动引太麻烦，这时还得需要一个插件：add-asset-html-webpack-plugin。
cnpm install add-asset-html-webpack-plugin --save-dev；
这个插件 会将 dll.js 文件拷贝到 dist 目录下，然会在自动引入 index.html 中。
// webpack.config.js
const AddAssetHtmlPlugin= require('add-asset-html-webpack-plugin')
plugins: [
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname,'./dll/react.dll.js') // 将该文件拷贝到dist目录下
}),
...
]
一般来说，DLL插件是用在开发环境下的。
7.动态加载
用来实现动态分离文件
import 语法引入。
核心原理是 使用jsonp动态导入需要引入的文件。
import 可以实现代码分割。
// index.js
button.addEventListener('click',() => {
// 动态导入，类比 路由懒加载 import语法
import('./ache.js').then(data => {
console.log(data.add(11,22))
})
})
给动态引入的文件增加名字
output: {
filename: 'xxx' // 同步打包的名字
chunkFilename: '[name].main.js' // 异步打包的名字 name 默认是0，1，2...递增的。
}
import(/* webpackChunkName: "video" */'./video.js').then(data => { // 会把 "video" 传入到 上面 [name] 中。
console.log(data)
})
// 打包后 video.main.js
8. 打包文件分析工具
8.1 多入口
// webpack.config.js
{ // entry 有三种写法：字符串，数组，对象
entry: {
'a': './a.js',
'b': './b.js'
}
}
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['a'] //要引入打包后的 'a' 代码块。
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'login.html',
chunks: ['b'], // 如果是 ['b','a']，我们希望 login.html中是按照 这个数组的顺序引进的，但是webpack是按照entry的顺序引入的，所以 我们要配置 chunkSortMode。
chunkSortMode: 'manual' // 手动按照我的顺序来执行
})
]
8.2 分析依赖
按装 cnpm install webpack-bundle-analyzer --save-dev 可视化分析工具。
多用在生产环境下，并且可以帮助我们将第三方包进行分离。
会自动生成一个8888端口。
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [
env !== 'development' && new BundleAnalyzerPlugin()
].filter(Boolean)
9. 第三方模块的抽离
当遇到类似于 react react-dom 这样较大的库时，需要抽离打包。可以使用下面属性。
dllPlugin 不要和 splitchunks 共同使用。
// webpack.config.js
optimization: {
splitChunks: {
// chunk: initial 只操作同步的 ；all所有的；async异步的。
chunks: 'async', // 默认支持异步代码分割 import()
minSize: 30000, // 文件超过30K 我就回抽离它
maxSize: 0,
minChunks: 1, // 最少模板引用一次才抽离
maxAsyncRequests: 30, // 最多5个请求
maxInitialRequests: 30, // 最多首屏加载30个请求
automaticNameDelimiter: '~', // xxx~a~b
enforceSizeThreshold: 50000,
automaticNameMaxLength: 30, // 最长名字大小
cacheGroups: { // 缓存组, cacheGroups内配置优先级高于外部配置
// react: {
// test: /[\\/]node_modules[\\/]\/react|react-dom/, // 要抽离的模块
// priority: 1 // 优先级
// },
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: { // common~a~b
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
// a.js
import ('jquary') // 异步
import React from 'react' // 同步
10. 费时分析
测试当前打包的速度
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin () //在外面new
// 将我们的打包代码包起来
module.exports = env => {
return smv.wrap({
mode: env,
entry: ...
output: ...
})
}
