site infoHacknerd | Tech Blog
blog cover

🎗️ [Webpack实战: 入门、进阶与调优] 8. 打包优化

JavaScriptWebpack

HappyPack

  • 1.工作原理
  • 2.单个loader的优化
  • 3.多个loader的优化
  • javascriptCopy
    const HappyPack = require('happypack')
    
    module.exports = {
    	// ...
    	module: {
    		rules: [
    			{
    				test: /\.ts$/,
    				exclude: /node_modules/,
    				loader: 'happypack/loader?id=ts'             // 需要指定id
    			},
    			{
    				test: /\.js$/,
    				exclude: /node_modules/,
    				loader: 'happypack/loader?id=js'             // 需要指定id
    			}
    		]
    	},
    	plugins: [
    		new HappyPack({
    			id: 'js',                                       // 需要指定id
    			loaders: [
    				{
    					loader: 'babel-loader',
    				}
    			]
    		),
    		new HappyPack({
    			id: 'ts',                                        // 需要指定id
    			loaders: [
    				{
    					loader: 'babel-loader',
    				}
    			]
    		)
    	}

    缩小作用域

  • 1.exclude include
  • 2.noParse
  • 3.IgnorePlugin
  • 4.cache
  • 动态库链接与DLLPlugin

  • 1.vendor配置
  • 2.vendor打包
  • 3.链接代码
  • 4.潜在问题
  • Tree Shaking

  • 1.ES module
  • 2.babel-loader配置
  • 3.使用压缩工具取出死代码
  • Contents

    • HappyPack
    • 缩小作用域
    • 动态库链接与DLLPlugin
    • Tree Shaking

    2024/05/30 08:04