vue项目优化之cdn引入依赖，减少打包体积。.pdf

vue项目优化之cdn引入依赖，减少打包体积。--第1页 vue项⽬优化之cdn引⼊依赖，减少打包体积。 webpack 对Externals的说明 外部扩展(Exter na ls) externals 配置选项提供了「从输出的 bundle 中排除依赖」的⽅法。相反，所创建的 bundle 依赖于那些存在于⽤户环境(consumers environment)中的依赖。此功能通常对 library 开发⼈员来说是最有⽤的，然⽽也会有各种各样的应⽤程序⽤到它。 externa ls string [string] object function RegExp 扩展依赖(external dependencies) 防⽌将某些 import 的包(package)打包到 bundle 中，⽽是在运⾏时(runtime)再去从外部获取这些 。 例如，从 CDN 引⼊ jQuery ，⽽不是把它打包： index.html script src=/jquery-3.1.0.js integrity=sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk= crossorigin=anonymous /script webpack.config.js module.exports = { //... externals: { jquery: jQuery, }, }; 这样就剥离了那些不需要改动的依赖模块，换句话，下⾯展⽰的代码还可以正常运⾏： import $ from jquery; $(.my-element).animate(/* ... */); 具有外部依赖(external dependency)的 bundle 可以在各种模块上下⽂(module context)中使⽤，例如 CommonJS, AMD, 全局变量和 ES2015 模块。外部 library 可能是以下任何⼀种形式： root：可以通过⼀个全局变量访问 library（例如，通过 script 标签）。 commonjs：可以将 library 作为⼀个 CommonJS 模块访问。 commonjs2：和上⾯的类似，但导出的是 module.exports.default . amd：类似于 commonjs ，但使⽤ AMD 模块系统 好了说了那么多，总结来说就是 vue项目优化之cdn引入依赖，减少打包体积。--第1页 vue项目优化之cdn引入依赖，减少打包体积。--第2页 将不怎么需要更新的第三⽅库脱离webpack打包，不被打⼊bundle中，从⽽减少打包时间，但⼜不影响运⽤第三⽅库的 ⽅式，例如import⽅式等 在v ue 项⽬⾥⾯ v ue.conf ig 怎么去配置呢？ 每次都⼿动去在index.html ⾥⾯⼿动引⼊外部依赖的cdn路径的。 肯定不是我们需要的，这太笨了。 需要解决的问题： a. 不打包指定的外部依赖 b. 在index.html⾃动引⼊外部依赖 怎么运⽤externals: 例如： 在index.html中引⼊CDN的资源react全家桶之类的资源 script src=/react/16.4.0-alpha.7926752/cjs/react.development.js/script script src=/ajax/libs/react-dom/16.3.2/cjs/react-dom-server.browser.development.js/script webpack.config.js配置如下： module.exports = { ... output: {