标签：dll pat pattern entry 问题 name 大型 for tput
通过使用插件和配置插件的参数。
首先通过speed-measure-webpack-plugin分析打包的各个插件和loader的耗时。然后具体问题，具体分析。
按照插件
npm install --save-dev speed-measure-webpack-plugin
使用时该插件需要将整个配置对象包裹
const SpeedMeasureWebpackPlugin = require(‘speed-measure-webpack-plugin‘); const smp = new SpeedMeasureWebpackPlugin(); module.exports = smp.wrap(smart(base, { //... }));
webpack中对js进行压缩的插件是terser-webpack-plugin。
const TerserWebpackPlugin = require(‘terser-webpack-plugin‘); optimization: { minimizer: [ new TerserWebpackPlugin({ parallel: true, // 启用并行压缩 cache: true, // 启用缓存 }) ] }
首先，了解三种hash的概念
1. hash 每次编译生成一个hash值。如果所有的文件都无变化，则hash值不变；如果有任何一个文件发生变化，hash值改变。所有的使用hash的文件名，hash值相同。 2. chunkhash 针对入口文件相关的模块的hash变化，如果入口对应的模块发生变化，hash值改变，为改变的入口依赖模块，hash不变。每个文件的hash不同。 3. contenthash 按照内容生成hash值。
为了更好的使用缓存，使用contenthash值。
?当开发模式下，设置devServer的hot：true时，默认调用webpack.HotModuleReplacementPlugin插件。此时不允许使用[contenthash],可以使用[hash]。
// output中使用contenthash output: { path: path.join(__dirname, ‘dist‘), filename: ‘[name].[contenthash].js‘, //name是入口对应的key，无可以,默认main } // css文件的contenthash new MiniCssExtractPlugin({ filename: ‘[name].[contenthash].css‘, })
对于引入的大型第三方库，不需要将其解析成语法树来解析依赖，提高构建速度。被定义在该配置中的模块中，不能调用import/require/define等引入机制。
module: {
noParse: /lodash|jquery/,
可以极大的提高打包/编译速度。
首先使用DllPlugin生成一个dll文件，需要配置一个单独的webpack.dll.config.js文件
const path = require(‘path‘); const webpack = require(‘webpack‘); module.exports = { mode: ‘none‘, entry: { react: [‘react‘, ‘react-dom‘] }, output: { filename: ‘[name].dll.js‘, path: path.join(__dirname, ‘dist‘), library: ‘_dll_[name]‘, }, plugins: [ new webpack.DllPlugin({ name: ‘_dll_[name]‘,// 名字必须和outputli.brary一直 path: path.join(__dirname, ‘manifest.json‘) }) ] }
package.json中配置脚本命令，生成dll文件
"scripts": { "dll": "webpack --config webpack.dll.config.js" }
在webpack.config.js中添加插件
new webpack.DllReferencePlugin({ // 建立索引 manifest: path.resolve(__dirname, ‘manifest.json‘), }), new CleanWebpackPlugin({ // 每次只清空非dll的文件，保留dll文件 cleanOnceBeforeBuildPatterns: [‘**/*‘,‘!react.dll.js‘], }),
devServer的contentBase设为./dist时，相对路径设置如下
<script src="../react.dll.js"></script>
标签：dll pat pattern entry 问题 name 大型 for tput
原文地址：https://www.cnblogs.com/lyraLee/p/12028770.html
