配置方式： wepack.config.js中，module: {noParse: /lodash/}
避免打包时不变的库重复构建
提高构建速度
webpack.all.config.js：
const webpack = require(‘webpack‘);
const path = require(‘path‘);
module.exports = {
entry: {
vendor: [‘react‘, ‘react-dom‘, ‘mobx‘, ‘mobx-react‘,‘react-router-dom‘, ‘lodash‘, ‘axios‘],
},
output: {
path: path.join(__dirname, ‘..‘, ‘dll‘),
filename: ‘[name].js‘,
library: ‘[name]‘,
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, ‘..‘, ‘dll‘, ‘manifest.json‘),
name: ‘[name]‘,
}),
]
};
在package.json中："dll-build": "webpack ENV=production --config script/webpack.dll.config.js"
在webpack.config.js中
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(‘../dll/manifest.json‘),
})
默认打包成一个bundle，代码拆分就是把这单个的bundle文件拆分成若干个bundles/chunks
缩短首屏加载时间
方式：
手动增加代码入口，
splitChunks提取公有代码，拆分业务代码与第三方库
splitChunks: {
chunks: ‘all‘,
cacheGroups: {
libs: {
name: ‘chunk-libs‘,
test: /[\\/]node_modules[\\/]/,
minSize:0,
priority: 10,
chunks: ‘initial‘,
},
antd: {
name: ‘chunk-antd‘,
priority: 20,
test: /[\\/]node_modules[\\/](@ant-design|antd)[\\/]/,
chunks: ‘initial‘,
},
echarts: {
name: ‘chunk-echarts‘,
priority: 20,
test: /[\\/]node_modules[\\/](echarts|echarts-for-react)[\\/]/,
chunks: ‘async‘,
},
},
},
webpack的资源压缩
terser-webpack-plugin压缩js, webpack默认配置
mini-css-extract-plugin 压缩css
html-webpack-plugin ->minify 压缩html
new MiniCssExtractPlugin({
filename: `${staticPath}/css/[name].[contenthash:16].css`,
chunkFilename: `${staticPath}/css/[name].[contenthash:16].css`,
}), //css压缩
new OptimizeCssAssetsPlugin() //css压缩的优化
new HtmlWebpackPlugin({
template: path.resolve(__dirname, ‘../src/public/index.html‘),
filename: path.resolve(__dirname, ‘../dist/index.html‘),
minify: {
removeComments: false, // 去注释
collapseWhitespace: false, // 压缩空格
},
}),
hash是文件的hash, chunkhash(每个)代码段的唯一的hash（其css和js一样），contenthash(css和js的不一样，相互独立，推荐使用)
stats分析与可视化 webpack chart,在线，webpack --profile --json ->stats.json,到网站上查看（github上的webpack-chart）
source-map-explorer 分析（打包后的）文件组成（推荐）
speed-measure-webpack-plugin （打包的）速度分析
source-map-explorer 基于source-map，
需要配置webpack.config.js, devtool: ‘hidden-source-map‘
需要配置package.json--》script-->analyze中 使用命令： source-map-explorer ‘build/*.js‘
npm run bulid
npm run analyze
实例.wrap(webpack配置)
react-loadable 动态加载组件,
安装：npm i @loadable/component
引入：import loadable from ‘@loadable/component‘
调用：loadable(()=>import(‘./SSS.JSX),{fallback:‘<div>loading...</div>})
SSS会被拆分出一个bundle
原文：https://www.cnblogs.com/baixinL/p/14943407.html