webpack优化 | 易学教程

1.当引入jquery模块时，不想解析jquery中的所有依赖库，太耗时间，可以使用noParse属性不去解析jquery依赖库

2.如果在其他模块引入js文件时，引入的是自己写的js文件，但是在编译的时候，先去找的是node_modules目录下的第三方包，然后再去找其他目录下的，也会耗费时间，可以使用exclude属性和include属性指定排除的目录和只找的目录。

3.例如我引入了第三方包的时间插件，但是只用了其中的一个文件而已，打包却是把这个包里所有的文件都打包了，压缩后的文件内容也会很大。可以在使用webpack的内置插件IgnorePlugin来忽略其中的某些文件，减少压缩后的文件大小。

webpack.config.js文件内容如下：

const path = require('path');
//用模板生成html，并且自动把js文件引入进去
const htmlWebpakPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        //输出路径
        path: path.resolve(__dirname,'dist')
    },
    module:{
        noParse:/jquery/,     //优化点1：不去解析jquery中的依赖库，可以减少打包时间(但是效果不是很明显)
        rules:[
            {test:/\.js$/,
            exclude:/node_modules/,    //优化点2：排除node_modules目录，就不会找该目录下的js文件
            include:path.resolve(__dirname,'src'),    //只找src目录下的js文件
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        //解析ES6和react语法
                        '@babel/preset-env',
                        '@babel/preset-react'
                    ]
                }
            }}
        ]
    },
    plugins: [
        new htmlWebpakPlugin({
            template: './src/index.html'
        }),
        new webpack.IgnorePlugin(/\.\/locale/,/moment/),   //优化点3：忽略掉模块的某些文件，打包后的文件大小就会缩小。忽略掉moment模块引入的locale
    ]
}

webpack自带的优化功能：

1.tree-shaking模式：

创建一个test.js文件：

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

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

export default {
    sum, minus
}

在index.js文件中引入test.js:

import calc from './test';
console.log(calc.sum(1,2));

使用开发模式(development)进行打包，打包后部分文件内容如下：

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nvar sum = function sum(a, b) {\n  return a + b + 'sum';\n};\n\nvar minus = function minus(a, b) {\n  return a - b + 'minus';\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  sum: sum,\n  minus: minus\n});\n\n//# sourceURL=webpack:///./src/test.js?");

可以看到打包后的文件中仍然存在minus函数。

使用生产模式(production)进行打包，打包后文件如下：

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);var n=function(e,t){return e+t+"sum"};console.log(n(1,2))}]);

而生产模式下的打包后文件内容已经看不到minus函数了。

这就是tree-shaking模式，import在生产环境下，会自动去除掉没有用到的代码。

注意，这里必须要用import来引入模块，而require不行。

//require不支持tree-shaking模式
let calc = require('./test.js');
//用require引入，不能直接用calc.sum()调用，es6语法会把结果放到default上
console.log(calc.default.sum(1,2));

2.scope hosting：作用域提升

如果我们写一段很低级的代码，如下：

let a = 1;
let b = 2;
let c = 3;
let d = a+b+c;   //在webpack中会自动省略一些可以简化的代码
//简化后的代码如下：console.log(6);
console.log(d);

在生产模式下打包后，webpack会自动优化代码，去除没必要的啰嗦的代码。

来源：https://www.cnblogs.com/zcy9838/p/11689866.html

标签

Webpack

sum

minus