一、webpack 性能优化之缓存
-
创建空文件夹，通过
npm init命令初始化package.json文件，通过npm install webpack webpack-cli -g命令全局下载webpack和webpack-cli，通过npm install webpack webpack-cli -D命令本地下载webpack和webpack-cli，通过npm i html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin -D命令下载html-webpack-plugin、mini-css-extract-plugin和optimize-css-assets-webpack-plugin，通过npm i eslint-loader eslint -D命令下载eslint-loader和eslint，通过npm i eslint-config-airbnb-base eslint-plugin-import eslint -D命令下载eslint-config-airbnb-base、eslint-plugin-import和eslint，eslint-config-airbnb-base依赖于eslint-plugin-import和eslint，通过npm i postcss-loeader postcss-preset-env -D命令下载postcss-loeader和postcss-preset-env，通过npm i css-loader less-loader -D命令下载css-loader和less-loader，通过npm i url-loader file-loader html-loader -D命令下载url-loader、file-loader和html-loader，通过npm i babel-loader @babel/core @babel/preset-env -D命令下载babel-loader、@babel/core和@babel/preset-env，通过npm i @babel/polyfill core-js -D命令下载@babel/polyfill和core-js。 -
在里面创建
src文件夹，里面创建css和js文件夹，index.html和server.js。在css中创建index.css，在js中创建index.js，代码如下所示：
- index.css
html, body { margin: 0; padding: 0; height: 100%; background-color: deeppink; } - index.js
import '../css/index.css'; function sum(...args) { return args.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); - index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello cache</h1> </body> </html> - server.js
const express = require('express'); const app = express(); app.use(express.static('build', { maxAge: 1000 * 3600 })); app.listen(3000);
- 创建
webpack.config.js文件，通过require引入path、html-webpack-plugin、mini-css-extract-plugin和optimize-css-assets-webpack-plugin。通过process.env.NODE_ENV定义nodejs环境变量：决定使用browserslist的哪个环境。定义一个复用loader，在下面匹配.css和.less文件的时候，需要重复使用。通过MiniCssExtractPlugin.loader提取css单独文件，使用css-loader，使用postcss-loader做css的兼容性处理，同时使用postcss-preset-env做css的按需加载的兼容性处理，options是postcss-loader的配置项，ident是固定写法，plugins是使用postcss-preset-env这个插件。entry是入口文件，output是出口文件，filename是输出的文件名，path是文件的输出路径。module是loader的配置，rules是详细的loader配置。在rules中使用oneOf，以下的loader只会匹配一个，不能有两个配置处理同一种类型文件，如果有需要提取出来。第一个规则是匹配以.css结尾的文件，通过use使用commonCssLoader这个抽出复用的loader。第二个规则是匹配以.less结尾的文件，通过use使用commonCssLoader这个抽出复用的loader和less-loader。第三个规则是匹配以.js结尾的文件，通过exclude不包括node_modules，通过enforce优先执行，通过loader使用eslint-loader，通过options设置自动修复eslint的错误。第四个规则是匹配以.js结尾的文件，通过exclude不包括node_modules，通过loader使用babel-loader，通过options进行配置，presets为预设，指示babel做怎么样的兼容性处理，使用babel/preset-env这个预设，cacheDirectory是开启babel缓存，第二次构建时，会读取之前的缓存。通过useBuiltIns按需加载，通过corejs指定core-js版本，通过targets指定兼容性做到哪个版本浏览器。js兼容性处理需要使用到babel-loader、@babel/core和@babel/preset-env。如果是基本js兼容性处理，需要使用@babel/preset-env，但是只能转换基本语法，如promise高级语法不能转换。如果使用全部js兼容性处理，需要使用@babel/polyfill，但是只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了，所有就需要做兼容性处理的就做做兼容性处理的就做，使用core-js。第五个规则是匹配以.jpg、png和gif格式的图片资源，通过loader使用url-loader，url-loader依赖于file-loader。进行options配置，设置limit为8 * 1024，图片大小小于8kb，就会被base64处理，给图片做优化。这样做的优点是减少请求数量（减轻服务器压力），缺点是图片体积会更大（文件请求速度更慢）。设置esModule为false，由于url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，解析时会出问题为[object Module]，所以关闭url-loader的es6模块化，使用commonjs解析。设置name为[hash:10].[ext]，给图片进行重命名，因为图片值为hash，[hash:10]取图片的hash的前10位，[ext]取文件原来扩展名。第三个规则是匹配以.html结尾的文件，使用loader为html-loader，处理html文件的img图片（负责引入img，从而能被url-loader进行处理）。第六个规则是匹配以.html结尾的文件，通过loader使用html-loader。第七个规则是匹配其它资源，通过loader使用file-loader，通过options进行输出路径配置，输出文件夹为media。plugins里面是一些插件配置，通过MiniCssExtractPlugin插件提取css以及对输出的css文件进行重命名，通过OptimizeCssAssetsWebpackPlugin对css文件进行压缩，通过HtmlWebpackPlugin复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），进行minify配置，通过collapseWhitespace移除空格，通过removeComments移除注释，压缩 html 文件。设置mode为production，在生产环境下webpack会自动压缩js代码，代码如下所示：
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'production'
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
module.exports = {
entry: 'src/js/index.js',
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
],
cacheDirectory: true
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production',
devtool: 'source-map'
}
-
缓存是分为两种，
babel缓存和文件资源缓存。babel缓存是需要在options中设置cacheDirectory为true，让第二次打包构建速度更快。文件资源缓存是让代码上线运行缓存更好使用，通过对输出的文件进行设置不同的hash值。 -
文件资源缓存的分类，如下所示：
| 类型 | 类型描述 | 类型问题 |
|---|---|---|
| hash | 每次wepack构建时会生成一个唯一的hash值 | 因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效，但是却只改动一个文件 |
| chunkhash | 根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样 | js和css的hash值还是一样的，因为css是在js中被引入的，所以同属于一个chunk |
| contenthash | 根据文件的内容生成hash值。不同文件hash值一定不一样 | 效果最好 |
- 在命令行输入
webpack命令，资源就会进行打包，以及相应的压缩代码，同时通过node server.js命令启动服务器服务，观察缓存的变化。
二、webpack 性能优化之 tree-shaking
- 在上面缓存的项目中，修改
js文件夹中的index.js，同时新增test.js，删除server.js文件，代码如下所示：
- index.js
import '../css/index.css'; import { mul } from './test.js' function sum(...args) { return args.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(mul(2, 3)); // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); - test.js
export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; }
tree shaking的本质是去除无用代码，摇树优化。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination），tree shaking是DCE的一种新的实现。tree shaking的前提是必须使用ES6模块化和开启production环境，作用是减少代码体积。在package.json中配置，通过"sideEffects": false是所有代码都没有副作用，都可以进行tree shaking。但是问题是可能会把css / @babel/polyfill这些副作用文件干掉，这些还是有需要的。所有，可以通过"sideEffects": ["*.css", "*.less"]，tree shaking就不会对这些文件进行处理，没有副作用的代码，代码如下所示：
"sideEffects": [
"*.css",
"*.less"
]
- 在命令行输入
webpack命令，资源就会进行打包，以及相应的压缩代码和去除无用的代码。
三、webpack 性能优化之 code-split
-
创建空文件夹，通过
npm init命令初始化package.json文件，通过npm install webpack webpack-cli -g命令全局下载webpack和webpack-cli，通过npm install webpack webpack-cli -D命令本地下载webpack和webpack-cli，通过npm i html-webpack-plugin -D命令下载html-webpack-plugin。 -
在里面创建
js文件夹，里面创建index.js和test.js，然后创建index.html，代码如下所示：
- index.js
function sum(...args) { return args.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); - test.js
export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; } - index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello cache</h1> </body> </html>
- 创建
webpack.config.js文件，通过require引入path和html-webpack-plugin。entry是入口文件，入口文件分为单入口文件和多入口文件。如果是单入口，输出只有一个bundle，单页面。如果是多入口，多个bundle，多页面。output是出口文件，filename是输出的文件名，path是文件的输出路径。[name]是取文件名，[contenthash:10]是取内容的hash值前10位。plugins里面是一些插件配置，通过HtmlWebpackPlugin复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），进行minify配置，通过collapseWhitespace移除空格，通过removeComments移除注释，压缩html文件，设置production，在生产环境下webpack会自动压缩js代码，代码如下所示：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './js/index.js',
test: './js/test.js'
},
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
}
- 第二种方式，修改
index.js和test.js，代码如下所示：
- index.js
import $ from 'jquery'; function sum(...args) { return args.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); // eslint-disable-next-line console.log($); - test.js
import $ from 'jquery'; // eslint-disable-next-line console.log($); export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; }
- 修改
webpack.config.js文件，添加optimization，在splitChunks中设置chunks为all。optimization可以将node_modules中代码单独打包一个chunk最终输出，自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独一个chunk，代码如下所示：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 'src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
},
mode: 'production'
}
- 第三种方式，修改
index.js和test.js，代码如下所示：
- index.js
function sum(...args) { return args.reduce((p, c) => p + c, 0); } import(/* webpackChunkName: 'test' */'./test') .then(({ mul, count }) => { // eslint-disable-next-line console.log(mul(2, 5)); }) .catch(() => { // eslint-disable-next-line console.log('文件加载失败~'); }); // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); - test.js
// eslint-disable-next-line console.log($); export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; }
- 通过
js代码，让某个文件被单独打包成一个chunk，import动态导入语法：能将某个文件单独打包，核心代码如下：
import(/* webpackChunkName: 'test' */'./test')
.then(({ mul, count }) => {
// eslint-disable-next-line
console.log(mul(2, 5));
})
.catch(() => {
// eslint-disable-next-line
console.log('文件加载失败~');
});
- 在命令行输入
webpack命令，资源就会进行打包，以及相应的压缩代码，以及代码分割。
四、webpack 性能优化之预加载和懒加载
- 在上面的
code-split的项目中，修改index.js和test.js文件，代码如下所示：
- index.js
console.log('index.js文件被加载了~'); document.getElementById('btn').onclick = function() { import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => { console.log(mul(4, 5)); }); }; - test.js
console.log('test.js文件被加载了~'); // eslint-disable-next-line console.log($); export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; }
webpack.config.js文件不变，懒加载是当文件需要使用时才加载，预加载是会在使用之前，提前加载js文件，正常加载是并行加载，同一时间加载多个文件。需要注意的是，预加载prefetch，等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。webpackChunkName是懒加载，webpackPrefetch是预加载，核心代码如下：
document.getElementById('btn').onclick = function() {
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
console.log(mul(4, 5));
});
};
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
