多平台编包动态引入依赖的解决方案

最近开发时遇到了这样的需求，A 平台需要引入一个 video.js，B 平台却是不需要的，那么面向 B 平台打包的时候把依赖装进去自然就不大合适。最好的方法是动态引入依赖，根据平台来判断要不要引入

动态引入依赖

很快啊，动态引入依赖的代码就写好了

js 复制代码

if (window.isPlatformA()) {
	import("!video.js").then((videojsModule) => {
        const videojs = videojsModule.default;
        ......
	})
}

关于为什么 video.js 前要加 ! 见 Webpack and Video.js，简单来说就是 webpack 会破坏 video.js 的代码，让它不好使了，从现象来看就是视频一直处于 loading 状态。所以通过这种写法来使得 video.js 不经过 webpack

自信启动，npm start！

播不出来 /(ㄒoㄒ)/~~

Uncaught ReferenceError: D_Projects_XXX_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_11__ is not defined

点进去看调用栈，是 babel 运行时的一个模块，没解析出来

这玩意搜也不好搜，只能拆开搜 createClass、babel runtime helpers 之类的。有的说给 babel 的 presets 里面加 "absoluteRuntime": false，这个是管绝对路径的，感觉没什么用；还有人说是 babel runtime 的版本要换，我这都没有 babel runtime。。

不对，既然是在代码跑起来的时候去动态的判断某些数值然后采取不同的措施，这意思不正是所谓的"运行时"嘛！再看 @babel/runtime 的介绍，@babel/runtime is a library that contains Babel modular runtime helpers，原来报错中提到的 babel runtime helpers 是出自它手

npm install @babel/runtime

解决了！

预编译优化

完成动态 import 之后，直接进行编包，结果完全没有缩小啊！

想想也是，加载的时候按需加载，这是针对浏览器的，浏览器的负担确实是小了。但是编包的时候，webpack 一看，这个 chunk 有可能会用到也有可能不会用到，那么我是把它打进去呢还是不打进去呢？还是打进去吧。这样的话，包就不可能小

C++ 的项目里，有通过 #ifdef 来实现预编译，动态决定编译时是否执行某段代码，js 有没有这种机制呢

果然，webpack 有一个叫 DefinePlugin 的 plugin（https://www.webpackjs.com/plugins/define-plugin/），可以起到类似 #define 的效果

json 复制代码

 	plugins: [
        new webpack.DefinePlugin({
            IS_PLATFORM_A: JSON.stringify(false),
        }),
	]

修改 import 处的条件

js 复制代码

if (IS_PLATFORM_A) {
	import("!video.js").then((videojsModule) => {
        const videojs = videojsModule.default;
        ......
	})
}

最后修改 uglifyjs 的配置，enable dead_code，使之过滤掉所有进不去的代码

js 复制代码

compress: {
	dead_code: true,
},

成功！

最后编出来的包比之前小了近 2000 KB