webpack优化

noParse

oParse作用主要是过滤不需要解析的文件，比如打包的时候依赖了三方库 如 jquyer，而jquery是一个单独的库没有其他依赖，这个时候可以通过配置noParse不去解析文件，提高打包效率

多个用 | 分隔

代码语言：javascript复制

...
module: {
  noParse: '/jquery|others/'
}
...

exclude与include

如我们匹配所有js的过程中，我们webpack会默认匹配node_modules里面的js文件

这个时候我们可以配置exclude和include设置排除的文件和限定的文件

代码语言：javascript复制

...
rules:[
    {
            test:/.js$/,
                exclude:/node_modules/,//排除
                include:path.resolve('src'),//限定
                use:{
                loader:'babel-loader'
                }
                ...

webpack.IgnorePlugin

忽略第三方包指定目录，让指定目录不要被打包进去

如 moment包

代码语言：javascript复制

import moment from 'moment'

//设置语言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

文件很大的原因主要是moment包,moment包会默认将所有语言包引入

我们配置IgnorePlugin

代码语言：javascript复制

...
 plugins:[
        new webpack.IgnorePlugin(/./locale/,/moment/),
        //moment这个库中，如果引用了./locale/目录的内容，就忽略
    ]
...

我们排除了所有语言包，这个时候页面是不能正常显示中文的 手动引入语言包

代码语言：javascript复制

import moment from 'moment'

import 'moment/locale/zh-cn';
//设置语言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

此时打包 文件小了许多

happyPack

由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。 我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

happyPack适应于大项目进行打包，如果小项目使用happpack可能效率还没有原生高 cnpm i happyPack -D

代码语言：javascript复制

...
 module:{
        rules:[
            {
                test:/.css$/,
                use:'HappyPack/loader?id=css'
            }
        ]
    },
    plugins:[
        new HappyPack({
            id:'css',
            use:['style-loader','css-loader']

        })
    ]
...

抽取公共代码

多个页面中共有某个文件

代码语言：javascript复制

//b
import $ from 'jquery'
console.log('b')
//a
import $ from 'jquery'
console.log('a')
//index,js
import './a.js';
import './b.js';
console.log('index-----')
//other.js
import './a.js';
import './b.js';
console.log('other-----')

代码语言：javascript复制

//webpack.config.js
let path = require('path')
let HappyPack = require('happypack')
module.exports={
    optimization:{
        splitChunks:{
            //分隔代码块
            cacheGroups:{
                //缓存组
                common:{
                   //公共模块
                   chunks:'initial',//入口处开始
                   minSize:0,//>0字节
                   minChunks:2,//用过2次以上
                },
                vendor:{
                    //引用多次第三方模块
                    priority:1,//先抽离第三方模块
                    test:/node_modules/,
                    chunks:'initial',//入口处开始
                    minSize:0,//>0字节
                    minChunks:2,//用过2次以上
                }
            }
        }
    },
    mode:'production',
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist'),
    
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:'HappyPack/loader?id=css'
            }
        ]
    }
    
}

网站 webpack 打包 javascript

0 人点赞