码迷,mamicode.com
首页 > Web开发 > 详细

webpack提高打包速度

时间:2019-12-14 19:01:49      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:dll   pat   pattern   entry   问题   name   大型   for   tput   

通过使用插件和配置插件的参数。

1. 打包速度分析

首先通过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, {
  //...
}));

2 启动js压缩插件的并行和缓存配置

webpack中对js进行压缩的插件是terser-webpack-plugin。

const TerserWebpackPlugin = require(‘terser-webpack-plugin‘);
optimization: {
   minimizer: [
     new TerserWebpackPlugin({
        parallel: true,  // 启用并行压缩
        cache: true,    // 启用缓存
     })
   ]
}

3.合理使用hash值修改文件名

首先,了解三种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‘,
    })

4. module.noParse

对于引入的大型第三方库,不需要将其解析成语法树来解析依赖,提高构建速度。被定义在该配置中的模块中,不能调用import/require/define等引入机制。

  module: {
    noParse: /lodash|jquery/,

5. 动态链接库dll

可以极大的提高打包/编译速度。

1. 生成dll文件

首先使用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"
  }

2. 使用DllReferencePlugin配置mainfest映射

在webpack.config.js中添加插件

    new webpack.DllReferencePlugin({
      // 建立索引
      manifest: path.resolve(__dirname, ‘manifest.json‘),
    }),
    new CleanWebpackPlugin({
      // 每次只清空非dll的文件,保留dll文件
      cleanOnceBeforeBuildPatterns: [‘**/*‘,‘!react.dll.js‘],
    }),

3. dll包引入html文件

devServer的contentBase设为./dist时,相对路径设置如下

<script src="../react.dll.js"></script>

webpack提高打包速度

标签:dll   pat   pattern   entry   问题   name   大型   for   tput   

原文地址:https://www.cnblogs.com/lyraLee/p/12028770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!