如何输出Webpack构建分析 1. 方案一:通过可视化分析工具Webpack Analyse,是个在线Web应用,上传starts.json文件就可以;不过好像需要翻墙; 2. 方案二:安装webpack-bundle-analyzer工具npm i -g webpack-bundle-analyzer,生成starts.json后直接在其文件夹目录执行webpack-bundle-analyzer后,浏览器会打开对应网页并展示构建分析文档地址webpack-bundle-analyzer 3. webpack-dashboard是一款统计和优化webpack日志的工具,可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表 4. jarvis是一款基于webapck-dashboard的webpack性能分析插件,性能分析的结果在浏览器显示,比webpack-bundler-anazlyer更美观清晰GitHub文档地址 webpack配置优化 1. 根据导入语句寻找对应的要导入的文件; 2. 在根据要导入的文件后缀,使用配置中的Loader去处理文件(如使用ES6需要使用babel-loader处理) 1. 优化Loader配置 2. 优化resolve.modules配置 3. 优化resolve.extensions配置 1. 频率出现高的文件后缀优先放在前面; 2. 列表尽可能的小; 3. 书写导入语句时,尽量写上后缀名 使用DllPlugin优化 1. 将依赖的第三方模块抽离,打包到一个个单独的动态链接库中 2. 当需要导入的模块存在动态链接库中时,让其直接从链接库中获取 3. 项目依赖的所有动态链接库都需要被加载 1. DllPlugin插件:用于打包出一个个单独的动态链接库文件; 2. DllReferencePlugin:用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件 1. webpack --progress --colors --config ./webpack.dll.config.js 2. webpack --progress --colors --config ./webpack.prod.js HappyPack并行构建优化 1. 安装:npm i -D happypack 2. 重新配置rules部分,将loader交给happypack来分配: 1. threads:代表开启几个子进程去处理这一类文件,默认是3个; 2. verbose:是否运行HappyPack输出日志,默认true; 3. threadPool:代表共享进程池,即多个HappyPack示例使用一个共享进程池中的子进程去处理任务,以防资源占有过多 代码压缩用ParallelUglifyPlugin代替自带的 UglifyJsPlugin插件 1. uglifyJS: {}:用于压缩 ES5 代码时的配置,Object 类型 2. test: /.js$/g:使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是 /.js$/ 3. include: []:使用正则去包含被压缩的文件,默认为 []. 4. exclude: []: 使用正则去包含不被压缩的文件,默认为 [] 5. cacheDir: '':缓存压缩后的结果,下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回,默认不会缓存,开启缓存设置一个目录路径 6. workerCount: '':开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1 7. sourceMap: false:是否为压缩后的代码生成对应的Source Map, 默认不生成 “积跬步、行千里”—— 持续更新中~,喜欢的话留下个赞和关注哦! 作者:keywords 原文:http://developer.51cto.com/art/201903/593428.htmconst Jarvis = require("webpack-jarvis");
plugins: [
new Jarvis({
watchOnly: false,
port: 3001 // optional: set a port
})
];
{
test: /\.js$/,
use: [
'babel-loader?cacheDirectory',//开启转换结果缓存
],
include: path.resolve(__dirname, 'src'),//只对src目录中文件采用babel-loader
exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目录下的文件
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules')],
}
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
mode: 'production',
entry: {
// 将React相关模块放入一个动态链接库
react: ['react','react-dom','react-router-dom','react-loadable'],
librarys: ['wangeditor'],
utils: ['axios','js-cookie']
},
output: {
filename: '[name]-dll.js',
path: path.resolve(__dirname, 'dll'),
// 存放动态链接库的全局变量名,加上_dll_防止全局变量冲突
library: '_dll_[name]'
},
// 动态链接库的全局变量名称,需要可output.library中保持一致,也是输出的manifest.json文件中name的字段值
// 如react.manifest.json字段中存在"name":"_dll_react"
plugins: [
new DllPlugin({
name: '_dll_[name]',
path: path.join(__dirname, 'dll', '[name].manifest.json')
})
]
}
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
...
plugins: [
// 告诉webpack使用了哪些动态链接库
new DllReferencePlugin({
manifest: require('./dll/react.manifest.json')
}),
new DllReferencePlugin({
manifest: require('./dll/librarys.manifest.json')
}),
new DllReferencePlugin({
manifest: require('./dll/utils.manifest.json')
}),
]
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({size: 5}); //构建共享进程池,包含5个进程
...
plugins: [
// happypack并行处理
new HappyPack({
// 用唯一ID来代表当前HappyPack是用来处理一类特定文件的,与rules中的use对应
id: 'babel',
loaders: ['babel-loader?cacheDirectory'],//默认设置loader处理
threadPool: happyThreadPool,//使用共享池处理
}),
new HappyPack({
// 用唯一ID来代表当前HappyPack是用来处理一类特定文件的,与rules中的use对应
id: 'css',
loaders: [
'css-loader',
'postcss-loader',
'sass-loader'],
threadPool: happyThreadPool
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['happypack/loader?id=babel'],
exclude: path.resolve(__dirname,' ./node_modules'),
},
{
test: /\.(scss|css)$/,
//使用的mini-css-extract-plugin提取css此处,如果放在上面会出错
use: [MiniCssExtractPlugin.loader,'happypack/loader?id=css'],
include:[
path.resolve(__dirname,'src'),
path.join(__dirname, './node_modules/antd')
]
},
}
...
minimizer: [
// webpack:production模式默认有配有js压缩,但是如果这里设置了css压缩,js压缩也要重新设置,因为使用minimizer会自动取消webpack的默认配置
new optimizeCssPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
// 是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果,可以设置为false
beautify: false,
//是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false
comments: false
},
compress: {
//是否在UglifyJS删除没有用到的代码时输出警告信息,默认为输出
warnings: false,
//是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句
drop_console: true,
//是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 1, 默认为否
collapse_vars: true,
}
}
}),
]