webpack性能优化
优化方向
- 优化开发体验
1. 打包构建时间
- 优化输出质量
1. 打包后的代码
体积小,没有冗余代码
① 配置loader的使用范围
尽可能使用includes或者exclude【推荐使用includes,范围更小】
如果不配置这个属性,webpack会从项目的根目录查找相应的文件进行打包
② 依赖的搜索目录
明确告诉webpack依赖安装的目录
③ 希望大家不要省略后缀
为什么用import引入文件时,可以不加后缀(.js .json等等),如下图所示
因为webpack会从extensions这个后缀列表中(如下图)找后缀,自动加上去,但是这样会浪费查找的时间
④ 拆分配置环境,可拆分为开发环境和线上环境等
在package.json文件中配置命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"mpa": "cross-env NODE_ENV=Davy webpack --config ./webpack.mpa.config.js --env.development",
"server": "webpack-dev-server ",
"dev-new": "webpack --config ./webpack.dev.config.js",
"build-new": "webpack --config ./webpack.prod.config.js"
},
基础配置文件 webpack.base.config.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
include: path.resolve(__dirname, "./src"),
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
limit: 2048,
},
},
},
{
test: /\.woff2$/,
include: path.resolve(__dirname, "./src"),
use: "file-loader",
},
{
test: /\.js$/,
include: path.resolve(__dirname, "./src"),
use: "babel-loader",
},
],
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks: ["main"],
}),
new CleanWebpackPlugin(),
],
};
开发配置文件 webpack.dev.config.js
const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");
const devConfig = {
output: {
path: path.resolve(__dirname, "./dev"),
filename: "[name]-[hash:6].js",
},
mode: "development",
module: {
rules: [
{
test: /\.less$/,
include: path.resolve(__dirname, "./src"),
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
},
],
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src/style"),
},
modules: [path.resolve(__dirname, "./node_modules")],
extensions: [".js", ".json", ".jsx", ".vue"], //后缀列表 希望大家不要省略后缀,因为会浪费查询时间。
},
devServer: {
contentBase: "./dist",
open: true,
port: 8081,
proxy: {
"/api": {
target: "http://localhost:9092/",
},
},
hot: true,
hotOnly: true,
},
devtool: "inline-source-map",
plugins: [new webpack.HotModuleReplacementPlugin()],
};
//合并基础配置和开发配置
module.exports = merge(baseConfig, devConfig);
生产配置文件 webpack.prod.config.js
const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const baseConfig = require("./webpack.base.config.js");
const { merge } = require("webpack-merge");
const optimizeCss = require("optimize-css-assets-webpack-plugin");
const glob = require("glob-all");
const purifycss = require("purifycss-webpack");
const prodConfig = {
output: {
path: path.resolve(__dirname, "./build"),
filename: "[name]-[hash:6].js",
},
mode: "production",
module: {
rules: [
{
test: /\.less$/,
include: path.resolve(__dirname, "./src"),
use: [
miniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader",
],
},
],
},
optimization: {
usedExports: true,
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src/style"),
},
modules: [path.resolve(__dirname, "./node_modules")],
extensions: [".js", ".json", ".jsx", ".vue"], //后缀列表 希望大家不要省略后缀,因为会浪费查询时间。
},
plugins: [
new miniCssExtractPlugin({
filename: "css/index-[contenthash:6].css",
}),
new purifycss({
paths: glob.sync([
path.resolve(__dirname, "./src/*.html"),
path.resolve(__dirname, "./src/*.js"),
]),
}),
new optimizeCss({
cssProcessor: require("cssnano"),
}),
],
};
//合并基础配置和打包配置
module.exports = merge(baseConfig, prodConfig);
⑤代码压缩
第一种方法
cnpm i cssnano -D
第二种方法
在环境拆分webpack.prod.config.js中,找到如下代码相关内容【上文中有】
const optimizeCss = require("optimize-css-assets-webpack-plugin");
⑥ 去掉冗余的css代码(没有用到的代码)
手动去掉
⑦ tree shaking
抖落掉没有用到的css代码、js代码
1. css shaking (独立的css文件)
安装一下三个插件
npm i glob-all purify-css purifycss-webpack -D
在生产配置文件 webpack.prod.config.js 中配置
const glob = require("glob-all");
const purifycss = require("purifycss-webpack");
plugins: [
new miniCssExtractPlugin({
filename: "css/index-[contenthash:6].css",
}),
new purifycss({
paths: glob.sync([
path.resolve(__dirname, "./src/*.html"),
path.resolve(__dirname, "./src/*.js"),
]),
}),
new optimizeCss({
cssProcessor: require("cssnano"),
}),
],
2. js shaking
在生产配置文件 webpack.prod.config.js 中配置
optimization: {
usedExports: true,
},
在package.json中配置 白名单
"sideEffects":["*.less","*.css","@babel/polyfill"],
process.env.NODE_ENV变量的注入
需要cross-env工具
cnpm i cross-env -D
在package中配置 cross-env NODE_ENV=development
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"mpa": "cross-env NODE_ENV=development webpack --config ./webpack.mpa.config.js",
"server": "webpack-dev-server ",
"dev-new": "webpack --config ./webpack.dev.config.js",
"build-new": "webpack --config ./webpack.prod.config.js"
},
npm run mpa 的时候就会获取到 development