webpack优化环境配置 - 26.多进程打包
thread-loader:
把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
开启多进程打包。
进程启动大概为600ms,进程通信也有开销。
只有工作消耗时间比较长,才需要多进程打包。
1.文件结构
2.代码
index.css
html,body{ margin: 0; padding: 0; height: 100%; background-color: skyblue; }
index.js
import { mul } from './test'; import '../css/index.css'; function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3, 4, 5, 6)); console.log(mul(2, 3)); /* 1. eslint不认识 window、navigator全局变量 解决:需要修改package.json中eslintConfig配置 "env": { "browser": true // 支持浏览器端全局变量 } 2. sw代码必须运行在服务器上 --> nodejs --> npm i serve -g serve -s build 启动服务器,将build目录下所有资源作为静态资源暴露出去 */ // 注册 serviceworker // 处理兼容性问题 if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(() => { console.log('sw注册成功了~'); }) .catch((err) => { console.log('err:', err); }); }); }
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"> <title>webpack</title> </head> <body> <h5>hello catch</h5> </body> </html>
webpack.config.js
const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') const WorkboxWebpackPlugin = require('workbox-webpack-plugin') /* PWA: 渐进式网络开发应用程序(离线可访问) workbox --> workbox-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/, use: [ /* thread-loader: 把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行 开启多进程打包。 进程启动大概为600ms,进程通信也有开销。 只有工作消耗时间比较长,才需要多进程打包 */ { loader: 'thread-loader', options: { workers: 2//2个进程 } }, { 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:10].[ext]', outputPath: 'imgs', esModule: false } }, { test: /\.html$/, loader: 'html-loader' }, { exclude: /\.(js|css|less|html|png|jpg|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 } }), new WorkboxWebpackPlugin.GenerateSW({ /* * 1.帮助 serviceworker 快速启动 * 2.删除旧的 serviceworker * * 生成一个 serviceworker 配置文件~ * */ clientsClaim: true, skipWaiting: true }) ], mode: 'production', devtool: 'source-map' }
3.打包
$ webpack
4.启动
$ serve -s build
end~