性能优化——webpack3 新增的Scope Hoisting
2018-02-17 00:55
1326 查看
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 “作用域提升”,是在 Webpack3 中新推出的功能。
main.js
打包后:
开启Scope Hoisting 后:
• 代码在运行时因为创建的函数作用域更少了,内存开销也随之变小
同时,考虑到 Scope Hoisting 依赖源码需采用 ES6 模块化语法,还需要配置 mainFields。因为大部分 Npm 中的第三方库采用了 CommonJS 语法,但部分库会同时提供 ES6 模块化的代码,为了充分发挥 Scope Hoisting 的作用,需要增加以下配置
对于采用了非 ES6 模块化语法的代码,Webpack 会降级处理不使用 Scope Hoisting 优化
对比:
util.jsexport default 'Hello,Webpack'
main.js
import str from './util.js'; console.log(str);
打包后:
[ (function (module, __webpack_exports__, __webpack_require__) { var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1); console.log(__WEBPACK_IMPORTED_MODULE_0__util_js__["a"]); }), (function (module, __webpack_exports__, __webpack_require__) { __webpack_exports__["a"] = ('Hello,Webpack'); }) ]
开启Scope Hoisting 后:
[ (function (module, __webpack_exports__, __webpack_require__) { var util = ('Hello,Webpack'); console.log(util); }) ]
好处:
• 代码体积更小,因为函数申明语句会产生大量代码;• 代码在运行时因为创建的函数作用域更少了,内存开销也随之变小
原理:
ES6的静态模块分析,分析出模块之间的依赖关系,尽可能地把模块放到同一个函数中。配置:
const Webpack = require('webpack') const path = require('path') module.exports = { entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new Webpack.optimize.ModuleConcatenationPlugin() ] }
同时,考虑到 Scope Hoisting 依赖源码需采用 ES6 模块化语法,还需要配置 mainFields。因为大部分 Npm 中的第三方库采用了 CommonJS 语法,但部分库会同时提供 ES6 模块化的代码,为了充分发挥 Scope Hoisting 的作用,需要增加以下配置
module.exports = { resolve: { // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件 mainFields: ['jsnext:main', 'browser', 'main'] }, };
对于采用了非 ES6 模块化语法的代码,Webpack 会降级处理不使用 Scope Hoisting 优化
相关文章推荐
- webpack性能优化——DLL
- webpack性能优化 —— CommonsChunkPlugin
- webpack学习教程之前端性能优化总结
- 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)
- webpack打包分析与性能优化
- webpack 前端构建性能优化策略小结
- webpack性能优化——DLL
- 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)
- 【前端构建】WebPack实例与前端性能优化
- Webpack性能优化 DLL 用法详解
- 【前端构建】WebPack实例与前端性能优化
- 优化Webpack构建性能的几点建议
- 优化 Webpack 构建性能的几点建议
- webpack 构建性能优化策略小结
- 【前端-webpack】webpack性能基础优化
- Webpack 性能优化 (一)(使用别名做重定向)
- webpack性能优化——DLL
- webpack性能优化——DLL
- 【前端构建】WebPack实例与前端性能优化
- WebPack实例与前端性能优化