webpack基础（十三）webpack优化

yarn init -y

yarn add webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react -D

noParse(指定不解析包的依赖)

当所引入的包没有依赖于其他的包时，可以配置webpack不去解析引入包的依赖项。

module: {
        noParse: /jquery/,  //不去解析jquery中的依赖关系，如果包没有依赖项目
    }

IgnorePlugin(手动引入)

引入moment会引入所有的语言包，可以使用webpack内置插件去除语言包的自动引入，将其手动引入从而降低其大小。

plugins: [
        new webpack.IgnorePlugin(/\.\/local/, /moment/), //moment中如果引入local就将其忽略
    ],

import moment from 'moment';

// 手动引入
import 'moment/locale/zh-cn'

moment.locale('zh-cn');

let r = moment().endOf('day').fromNow();
console.log("r", r);

dllPlugin(动态链接库)

使用react时，将react和reactDom的打包独立出来

mainfest.json任务清单，用名字取打包后的library上找。

新建webpack.config.react.js配置文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: "development",
    entry: {
        react: ['react', 'react-dom']
    },
    output: {
        filename: "_dll_[name].js",
        path: path.resolve(__dirname, 'dist'),
        library: '_dll_[name]',
        // libraryTarget: "var"   //umd commonjs 默认var
    },
    plugins: [
        new webpack.DllPlugin({
            // name===library
            name: "_dll_[name]",
            path: path.resolve(__dirname, 'dist', 'manifest.json')
        })
    ]
};

原配置文件配置webpack.DllReferencePlugin插件,此时引入会去动态链接库去找。

plugins:[
       new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, 'dist', 'manifest.json')
        }),
]

happypack(多线程打包)

yarn add happypack -D

项目较小时可能会更慢，在项目较大时会明显。

plugins:[
 new Happypack({
            id: 'js',
            use: [
                {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'   //解析react语法
                        ]
                    }
                }
            ]
        })]
        
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,    //排除
                include: path.resolve('src'),   //包含，排除和包含加一个
                use: 'happypack/loader?id=js'
            }
        ]
    }

webpack自带优化

tree-shaking把没用的代码自动删除

import calc from './test';

console.log(calc.add(1, 2));

let sum = (a, b) => {
    return a + b
};
let minus = (a, b) => {
    return a + b
};

export default {
    sum: sum,
    minus: minus
}

import 在生产环境下会自动去掉没用的代码

require 模块会把结果放到default。

scope hosting 作用域提升(webpack 3+)

let a=1;
let b=2;
let c=3;
let d=a+b+c; //在webpack中自动省略一些可以简化的代码

console.log(d)

抽取公共代码

index 引入a.js,b.js other引入a.js,b.js 应该将a.js,b.js抽离出来。
主要针对于多页面。

//原commonChunkPlugins
optimization: {
        splitChunks: {  //分割代码块，只有多页应用需要，
            cacheGroups: {      //缓存组
                common: {       //公共模块
                    minSize: 0,     //超过多大的抽离
                    minChunks: 2,   //引用多少次抽离
                    chunks: "initial",  // 从哪里开始  initial：从入口开始。
                },
                vendor: {
                    priority: 1,    //抽离的权重
                    test: /node_modules/,    //符合此正则的抽离出来
                    chunks: "initial",
                    minSize: 0,
                    minChunks: 2
                }
            }
        }
    },

懒加载

import() 需要使用babel

yarn add @babel/plugin-syntax-dynamic-import -D

{
                        loader: "babel-loader",
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react'   //解析react语法
                            ],
                            plugins:[
                                '@babel/plugin-syntax-dynamic-import'
                            ]
                        }
                    }

  // es6草案中的语法，webpack实现，jsonp实现动态加载文件， 返回一个Promise
    import('./source.js').then((data) => {
        console.log(data.default)
    })

vue,react路由懒加载都依靠此实现。

热更新

每次更改都会刷新整个页面，实现只更新某个部分(组件)，在开发服务中配置

 devServer: {
        port: 3000,
        open: true,
        contentBase: './dist',
        hot: true //开启热更新
    },

   plugins: [
        new webpack.NamedModulesPlugin(),   //打印更新的模块路径
        new webpack.HotModuleReplacementPlugin()    //热更新插件
    ],

import str from './source';
console.log(str);
if (module.hot) {
    module.hot.accept('./source', () => {
        console.log('文件更新了');
        let str = require('./source');
        console.log(str)
    })
}