做网站的公司怎么拓展业务,前端是做网站的吗,商业网站建设开发中心,如何建立网站视频最近开发时遇到了这样的需求#xff0c;A 平台需要引入一个 video.js#xff0c;B 平台却是不需要的#xff0c;那么面向 B 平台打包的时候把依赖装进去自然就不大合适。最好的方法是动态引入依赖#xff0c;根据平台来判断要不要引入
动态引入依赖
很快啊#xff0c;动…最近开发时遇到了这样的需求A 平台需要引入一个 video.jsB 平台却是不需要的那么面向 B 平台打包的时候把依赖装进去自然就不大合适。最好的方法是动态引入依赖根据平台来判断要不要引入
动态引入依赖
很快啊动态引入依赖的代码就写好了
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 的 pluginhttps://www.webpackjs.com/plugins/define-plugin/可以起到类似 #define 的效果 plugins: [new webpack.DefinePlugin({IS_PLATFORM_A: JSON.stringify(false),}),] 修改 import 处的条件
if (IS_PLATFORM_A) {import(!video.js).then((videojsModule) {const videojs videojsModule.default;......})
}最后修改 uglifyjs 的配置enable dead_code使之过滤掉所有进不去的代码
compress: {dead_code: true,
},成功 最后编出来的包比之前小了近 2000 KB
