首页 > 其他分享 >Webpack中的高级特性

Webpack中的高级特性

时间:2022-10-26 14:58:18浏览次数:89  
标签:... webpack 特性 高级 loader Webpack module 模块 js

自从webpack4以后,官方帮我们集成了很多特性,比如在生产模式下代码压缩自动开启等,这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。

探索webpack的高级特性

特性:treeShaking

顾名思义treeShaking,就是摇树,那么体现在代码模块里面就是摇掉那些没有被外部成员引用的代码,指的注意的是在生产环境下treeShaking会自动开启。

treeShaking初体验

比如我们在代码中引入lodash库,我们只用到了once方法,那关于lodash其他的功能模块,在生产环境下打包,并不会输出到bundle.js文件里面,比如我们在bundle.js里面去找lodash的一个方法debounce,他是完全可以找得到的。

image.png

delelopment模式下打包的bundle.js

在这里插入图片描述

production模式下打包的bundle.js

image.png 在这里你可能会说了production模式下会开启n多插件,处理打包结果,怎么就能说明是treeShaking做的呢,确实这种做法不能说明是treeShaking做的,我们可以把mode设置为none再试一下,不过这里需要我们手动去开启treeShaking,开启的方式如下。

// webpack.config.js
module.exports = {
    ...
    optimization: {
        usedExports: true, // 只导出外部成员引用模块
        // 此属性用于模块导入合并,因为单独的模块导入要使用_webpack_require_函数。
        // 此属性就是可以利用_webpack_require_一次性导入所有模块,也叫作用域提升。
        concatenateModules: true, 
        minimize: true, // 开启代码压缩
    }
    ...
}
none模式下打包的bundle.js

所以none模式下,打包的结果依然如此。

在这里插入图片描述

扩展

因为treeShaking是依赖于ESM的,如果项目中有配合使用babel-loader那么treeShaking是不是会失效呢?我们可以在配置文件里面添加babel-loader来辅以测试。

// 安装
npm i babel-loader @babel/core @babel/preset-env -D
// webpack.config.js
module.exports = {
    ...
    module:[
        {
            test:/\.js$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        ['@babel/preset-env']
                    ]
                }
            }
        }
    ]
}
文件效果

我们可以看到没有使用的代码,依然是被移除掉了。

image.png

原因分析

因为babel-loader禁用了对ESM转化插件,所以经过babel-loader处理生成的依旧是ESM代码,如果你想使用代码转换功能,那你就需要像下面这样配置,只不过这样treeShaking就会失效了。

// 安装
npm i babel-loader @babel/core @babel/preset-env -D
// webpack.config.js
module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            // 强制使用commonjs转换
                            ['@babel/preset-env', {modules: 'commonjs'}]
                        ]
                    }
                }
            }
        ]
    }
}

那么treeShaking失效了,应该怎么办?不要怕,即使失效了还会有其他插件提供了类似treeShaking功能,比如代码压缩。

特性: sideEffect

sideEffect表示的意思就是副作用,理解起来并不难,比如外部成员引用了当前模块,那么当前模块肯定是不会被treeShaking的,如果在当前模块里面写了冗余的代码,那么sideEffect就是去除这些冗余代码的,以达到更高的提效能力。

sideEffect的基础实践

这里我们应该在webpack.config.js里面开启sideEffect,在package.json里面指定具有副作用的模块。

// webpack.config.js
module.exports = {
    ...
    optimization: {
        sideEffect: true
    }
    ...
}

// package.json

{
    "scripts": {},
    "sideEffect": [
        // 告知webpack此文件具有副作用
        "./src/app.js",
        // *通配符css文件
        "*.css"
    ]
}

特性: CodeSplitting分包策略

CodeSplitting分包策略旨在解决单入口打包导致bundle.js文件过大,从而导致浏览器http加载速度过慢造成页面短暂白屏情况,分包策略具有三种常见实施方式。

  • 根据项目背景,多入口打包。
  • 结合ESMDynamic import特性,按需加载模块。
  • 对第三方包使用拆包策略。

多入口打包的具体实践

多入口打包体现在多页应用,每一个页面依赖于一个打包文件,对于模块中的公共代码进行提取到公共结果中。参考webpack视频讲解:进入学习

module.exports = {
    entry: {
            index: "./src/index.js",
            add: "./src/add.js",
    },
    optimization: {
        splitChunks: {
            // 自动提取到一个公共的bundle.js中
            chunks: "all"
        }
    }
    plugins:[
        ...
        new HtmlWebpackPlugin({
            filename: 'anout.html',
            template: './aout.html',
            chunks:['add']
        }),
        new HtmlWebpackPlugin({
            titie: 'title',
            template: './index.html',
            meta:{
                viewport: 'width=device-widt, initial-scale=2.0'
            },
            filename: 'index.html',
            publicPath: './',
            scriptLoading: 'module',
            chunks:['index']
        })
        ...
    ],
    ...
}

比如在index.js、add.js里面抖音用到了once方法,webpack就会提取公共的lodash到单的文件里面,在两个页面里面会通过script引入。 image.png

Dynamic import的按需加载实践

在选项卡切换场景下,在应用程序运行的过程中,只有当用户点击某个模块,才会对应去加载某个模块,大大的减少了启动时需要加载模块的体积,降低了浏览器网路的带宽的占用,提高了应用的响应率。

const hash = window.location.hash;
const container = document.getElementById('app');
switch(hash){
    case 'title_1': 
    import('./title_1.js').then({default:title_1}=>{
        container.appednChild(title_1())
    });
    break;
    case 'title_2': 
    import('./title_2.js').then({default:title_1}=>{
        container.appednChild(title_2())
    });
    break;
    case 'title_3': 
    import('./title_3.js').then({default:title_1}=>{
        container.appednChild(title_3())
    });
    break;
    default:
}

按需加载确实不需要在首屏的时候一次性把文件全部加载完毕,因为首屏并不需要所有模块,加载了也是浪费

第三方包拆包策略

所谓三方包,在在多入口里面也提到过optimization.splitChunks只是一种提取三方包的方式,我们现在要讲的是插件层面的DllPluginDllReferencePlugin,这个插件的意义更为广阔一点,比如类似vuereact等三方包,配合着我们的项目代码,只需要初次构建一次,再次构建webpack就会跳过这些依赖包,只要我们不手动升级依赖包,那将会是永久性的缓存。

使用步骤
  1. 新建webpck.dll.config.js文件,写上如下内容。
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // 入口文件
  mode: "development",
  entry: {
    // 项目中用到该两个依赖库文件
    lodash: ['lodash'],
  },
  // 输出文件
  output: {
    // 文件名称
    filename: '[name].dll.js', 
    // 将输出的文件放到dist目录下
    path: path.resolve(__dirname, 'vandor'),

    /*     存放相关的dll文件的全局变量名称,比如对于lodash来说的话就是 _dll_lodash, 在前面加 _dll     是为了防止全局变量冲突。    */
    library: '_dll_[name]'
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*       该插件的name属性值需要和 output.library保存一致,该字段值,也就是输出的 manifest.json文件中name字段的值。       比如在jquery.manifest文件中有 name: '_dll_jquery'      */
      name: '_dll_[name]',

      /* 生成manifest文件输出的位置和文件名称 */
      path: path.join(__dirname, 'vandor', '[name].manifest.json')
    })
  ]
};
  1. 在package.json里面新增命令 => "dll": "webpack --config webpack.dll.config.js"并执行,生成文件。

在这里插入图片描述

  1. 引入文件的依赖关系
const webpack = require('webpack');
module.exports = {
    plugins:[
        ...
        new webpack.DllReferencePlugin({
           manifest: require('./vandor/lodash.manifest.json')
        }),
        ...
    ]
}

特性: 魔法注释

在分包或者定义其他模块的时候,我们想给模块定义一个名称,那就可以使用如下方式。

/* webpackChunkName:'<chunkName>' */

探索webpack带来的前端性能优化

在前几篇文章里面我们就知道了webpack通过mode来提供了nonedevelopmentproduction三种预设配置。每一种配置都会选择性的加载某些插件来优化项目的构建,但是作为一个开发者我们应当去关注非自动的功能配置,下面我们来一起探索一下在开发中使用到的配置能带来一定的性能优化

为什么要进行性能优化

性能优化是前端开发的永久性话题,高性能应用的开发这是我们的目标,但是目标总就是目标,具体实施还是要一步一块板砖,webpack在实践如此多的新特性的同时,会给我们的打包结果带来具有影响的内容,比如sourceMap,上有政策下有对策,那么我们的种种可优化的点就是解决问题的对策。

具体对策

那么我们应该怎么样来提高构建速度与打包结果呢?
实际的开发中你总会见到我们会对不同的环境配置不同的文件,根据env的不同来启用不同的配置。

// webpack.development.config.js
module.exports = {
    mode:"development",
    detool:"source-map"
    ...
}

// webpack.production.config.js
module.exports = {
    mode:"production",
    detool:"nosources-source-map"
    ...
}

// webpack.config.js

module.exports = (env, args) => {
    // 公共配置
    const config = {
        module:{},
        plugins:[],
        ...
    }
   env === "development" ? require('./webpack.development.config.js'):require('./webpack.production.config.js')
   return config;
}
  • DefinePlugin定义全局变量,可用作baseUrl

    ...
    plugin:[
        new webpack.DefinePlugin({
            API_BASEURL:'https://www.yixizhishi.com'
        })
    ]
    ...
    
  • MiniCssExtractplugin用来从js代码中提取css代码。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

...
plugin:[
    new MiniCssExtractPlugin()
],
module:{
    rules:[
        {
            test:/\.css/,
            use:[
                // 通过link标签引入到页面中
                MiniCssExtractPlugin.loader,
                cssloader
            ]
        }
    ]
}
  • optimizeCssAssetsWebpackPlugin,用来压缩css代码。

    • webpack中所谓压缩就是压缩js文件的,而css文件,需要我们单独处理。
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

...
// 非plugin中使用
optimization:[
    minimizer:[
        new OptimizeCssAssetsWebpackPlugin()
        new terser-webpack-plugin()
    ]
]
  • terser-webpack-plugin用于压缩js代码。
    • 如果在optimization选项中开启了minimizer属性,则会覆盖掉webpack本身的压缩功能,所以我们需要手动添加压缩插件。
const terserWebpackPlugin = require('terser-webpack-plugin');

...
optimization:[
    minimizer:[
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
        // 压缩js
        new terserWebpackPlugin()
    ]
]

当然还有一些其他的配置呀,比如。

  • splitChunks的一些配置呀,也就是按你的需求拆包呀。
splitChunks: {
    cacheGroups: {
        commons: {
            chunks: "initial",//相同的chunks提出来
            minChunks: 2,//依赖了两个以上的关系
            minSize: 0 //这个依赖最小体积为0
        },
        vendor: {
            test: /node_modules/,
            // 默认选项,表示只要有依赖的第三方包就要拆出去,跟all差不多
            chunks: "initial",
            name: "vendor",
            enforce: true
        }
    },
}
  • cdn的引入三方包呀。
module.exports = {
    ...
    // 通过外部引入第三方包
    externals:['jQuery','lodash']
    ...
}
  • 多线程打包的开启呀,比如happyPack
    • happyPack的工作原理就是把loader加载分配多个线程去处理,最后在统一调度起来,处理完成之后通知webpack进行chunks的组合,输出bundle.js注意:并不是说多进程打包就一定好,因为创建多线程的时候也会有性能开销,所以还是斟酌而行。
  • 使用include避免webpack处理不需要处理的模块文件,提高编译效率。
  • webpack5提供了webpack资源模块,来代替一般的loader处理文件,好处是能够处理不同类型的文件并且不再需要针对性的配置loader

image.png

  • resolve模块一般被人们忘掉了,不过在vue/react的脚手架中还是看见过它的身影,一般用于告诉webpack以什么样的形式去处理文件,比如。
    • 别名:alias
    • 文件类型:extensions
    • 解析的模块范围:modules
module.exports = {
    resolve: {
        alias:{
            '@':'root/src' // 指定别名@,通过@可以找到文件目录
        },
        extensions:{
            ['.jsx', '.tsx', '.vue'] // 指定webpack需要解析哪些类型的文件
        },
        modules:{
            ['node_modules', 'root/src'] // 指定webpack需要解析那些范围的文件
        }
    }
}

写在最后

因为上面的一些优化手段涵盖了webpack5以及webpack5以前的特性,那么在这里提及一下webapck5中开箱即用的特性以及不再维护的老版本的特性吧。

  • 持久化缓存,使用cache之后我们便不需要使用dll拆包、cache-loader了,而且是webpack5中提供的功能。
module.exports = {
    cache: {
      type: 'filesystem', // 文件系统
    },
}
  • thread-loader开启多线程打包,上述代码中提到了happypack,不过在webpack5当中,已经不再去维护happypack了,我们就应该使用thread-loader来加快构建进程。

总结

上述讲解的内容均是在开发环境下的的配置的一步步实现,当然在mode:"production"webpack会自动帮我们做,所以在不依赖别人的情况下,还是自己配比较好玩。下一章我们就一起来探索一下各大成熟框架是怎么配置webpack

标签:...,webpack,特性,高级,loader,Webpack,module,模块,js
From: https://www.cnblogs.com/gogo2027/p/16828336.html

相关文章

  • Webpack完整打包流程分析
    前言webpack在前端工程领域起到了中流砥柱的作用,理解它的内部实现机制会对你的工程建设提供很大的帮助(不论是定制功能还是优化打包)。下面我们基于webpack5源码结构,对......
  • Vue响应式依赖收集原理分析-vue高级必备
    背景在Vue的初始化阶段,_init方法执行的时候,会执行initState(vm),它的定义在src/core/instance/state.js中。在初始化data和propsoption时我们注意initProps......
  • Python的高级用法,效率提高没毛病!
    任何编程语言的高级特征通常都是通过大量的使用经验才发现的。比如你在编写一个复杂的项目,并在stackoverflow上寻找某个问题的答案。然后你突然发现了一个非常优雅的解决......
  • JavaScript高级程序设计笔记12 BOM
    BOMBOM的核心——window对象窗口和弹窗location对象——页面信息navigator对象——浏览器信息history对象——浏览器历史记录BOM是使用JavaScript开发Web应用程序的......
  • 安卓WPS office v16.4高级订阅VIP解锁版
    WPSOffice+PDF是体积最小,一体式的办公套件应用程序,致力于帮助您随时随地在Android手机和平板电脑上快速轻松地创建,查看和编辑Office文档和作业。到目前为止,WPSOffice......
  • C++ 面向对象高级开发 基础篇(二)
    操作符重载C2就是this传递者不用知道是否returnbyreference 非成员函数(全局函数)的操作符重载(有几种用法就写几种重载)不能使用returnbyreference因为他们得......
  • Java8新特性-接口增强、Lambda表达式、函数式接口
    一、Interface接口增强1.1默认方法1.概念:使用default关键字来修饰的方法2.语法:访问修饰符default返回值类型方法名称(参数列表){方法体;return返回值}3.......
  • C++ 面向对象高级开发 基础篇(一)
    C与C++的结构 C++举例   基本结构:   C与C++的输出    防御式声明   头文件声明   Class的声明 模板   访问......
  • java程序员面试题(高级程序员面试题)
    java面试问题给你参考!!!一个月的实习过程使我受益匪浅。不仅是在专业知识方面,最主要是在怎样去解决编程中出现的问题。社会在加速度地发生变化,对人才的要求也越来越高,要用......
  • PHP中str_replace高级使用你知道吗
    在阅读PHP框架ThinkPHP源码的过程中有很多方法的冷门使用,也就是不常用的使用方法。这里咔咔先对str_replace这个方法进行解析,这个方法也就是替换字符串中的一些字符(区分大......