webpack实现的性能优化

 loader和plugin区别

loader只专注于转化文件，完成压缩打包；plugin不仅局限于打包、资源加载，还可以优化打包和压缩，重新定义环境变量

loader运行在打包文件之前；plugin在整个编译周期都起作用；

一个loader只能完成一种转换；

plugin去监听webpack运行的生命周期中广播的许多事件，在合适的时机通过webpack的API改变输出结果

1. 优化loader的文件搜索范围

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: path.resolve('src'), // 只处理src文件夹下的文件
                exclude: /node_modules/ // 不处理node_modules下面的文件
            }
        ]
    }
}

2.编译后的文件加上缓存- 可用于生产环境

modules:{
    rules:[{
        test: /\.js$/,
        use: ['babel-loader?cacheDirectory'], // 开启缓存
        include: path.resolve(_dirname, 'src'), //明确范围
        // 排除范围 和明确范围选一个即可
        // exclude: path.resolve(_dirname, 'node_modules')
        
        },
    ]
}

3.使用多进程打包- JS单线程，开启多进程打包，提高构建速度：HappyPack, 可用于生产环境

const HappyPack = require('happyPack') //引入多进程打包的工具
const ParalleUglifyPlugin = require('ParalleUglifyPlugin') // 引入多进程压缩的工具

module.exports = {
    modules:{
        rules:[{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory'], // 开启缓存
            include: path.resolve(_dirname, 'src'), //明确范围
            // 排除范围 和明确范围选一个即可
            // exclude: path.resolve(_dirname, 'node_modules')
        
            },
            {
            // 使用happypack多进程打包
            test: /\.js$/,
            use: ['happyPack/loader?id=babel'], 
            },
         
        ]
    },
    plugins: {
        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前 的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader配置中一样
            loaders: ['babel-loader?cacheDirectory']
        })
    
    }
}

4.多进程压缩js:ParalleUglifyPlugin，可用于生产环境

let ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
    module: {},
    plugins: [
        new ParallelUglifyPlugin({
            workerCount：3，//开启几个子进程去并发的执行压缩。默认是当前运行电脑的cPU核数减去1
            uglifyJs:{
                output:{
                    beautify:false，//不需要格式化
                    comments:false，//不保留注释
                }，
                compress:{
                    warnings:false，//在Uglify]s除没有用到的代码时不输出警告
                    drop_console:true，//删除所有的console语句，可以兼容ie浏览器
                    collapse_vars:true，//内嵌定义了但是只用到一次的变量
                    reduce_vars:true，//取出出现多次但是没有定义成变量去引用的静态值
                }
            }，
        })
    ]
}

5.动态链接库插件，先提前打包好，再使用： DllPlugin，不可用于生产环境 

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
    // 想统一打包的类库
    entry:['react','react-dom'],
    output:{
        filename: '[name].dll.js',  //输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称
        path:path.resolve(__dirname,'dll'),  // 输出的文件都放到 dll 目录下
        library: '_dll_[name]',//存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
    },
    plugins:[
        new DllPlugin({
            // 动态链接库的全局变量名称，需要和 output.library 中保持一致
            // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
            // 例如 react.manifest.json 中就有 "name": "_dll_react"
            name: '_dll_[name]',
            // 描述动态链接库的 manifest.json 文件输出时的文件名称
            path: path.join(__dirname, 'dll', '[name].manifest.json')
        })
    ]
}

6.避免引用无用模块，让webpack 不把这些指定的模块打包进去。代码中没有，需要什么自己引入，IgnorePlugin:可用于生产环境

module.exports = {
    plugins: {
        // 忽略 moment 下的 /locale目录，忽略所有的语言包  在使用语言包时，需要手动添加中文语    
        // 言包                      
        // import 'moment/locale/zh-cn'
        new webpack.IgnorePlugin(/\.\/locale/, /moment/)
    }
}

7.避免重复打包-引入，但不打包，比如react.min.js本身就打包好了，不需要再次打包：noParse

module.exports = {
    modules:{
        rules:[{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory'], // 开启缓存
            include: path.resolve(_dirname, 'src'), //明确范围
            // 排除范围 和明确范围选一个即可
            // exclude: path.resolve(_dirname, 'node_modules')
        
            },
             // 忽略对 react.min.js文件的递归解析处理
            noParse: [/react\.min\.js$/]
    ]
},
}