webpack打包优化

tree shaking

使用import导入的包，在生产环境下自动去除包内没有引用的代码。这是webpack打包自带的优化

import是es6引入规范（所以记得要装babel）
require是common.js引入规范

scope hosting

转自
在bundle.js文件

// module-a.js
export default 'module A'
// entry.js
import a from './module-a'
console.log(a)

打包

// bundle.js
// 最前面的一段代码实现了模块的加载、执行和缓存的逻辑，这里直接略过
[
  /* 0 */
  function (module, exports, require) {
    var module_a = require(1)
    console.log(module_a['default'])
  },
  /* 1 */
  function (module, exports, require) {
    exports['default'] = 'module A'
  }
]

使用ModuleConcatenationPlugin
插件使用方法

    new webpack.optimize.ModuleConcatenationPlugin(),

结果,把导入导出的模块都放在了一个函数里了

// bundle.js
[
  function (module, exports, require) {
    // CONCATENATED MODULE: ./module-a.js
    var module_a_defaultExport = 'module A'

    // CONCATENATED MODULE: ./index.js
    console.log(module_a_defaultExport)
  }
]

显而易见，这次 Webpack 将所有模块都放在了一个函数里，直观感受就是——函数声明少了很多，因此而带来的好处有：

1. 文件体积比之前更小。
2. 运行代码时创建的函数作用域也比之前少了，开销也随之变小。

这个插件不支持common.js语法，因为他支持模块动态加载，这种情况很难分析出模块之间的依赖关系及输出的变量。

happyPack

实现多线程打包进程

抽离公共模块代码

见此

懒加载

let btn = document.getElementById('btn')
btn.addEventListener('click', () => {
  console.log('click');
  import('./other.js').then(data => {
    console.log(data.default.a)
  }).catch(err=>{
    console.log(err);
  })
})
// home.js:37   click
// common.js:3  aa
// home.js:39   12

let common = require('./common.js')
common.com()
module.exports = {
  a:12
}

动态链接库

https://juejin.im/post/5ac42d5c6fb9a028b617b851