前端优化 - externals 实现运行时加载依赖

最新推荐文章于 2023-11-21 15:40:29 发布

原创

最新推荐文章于 2023-11-21 15:40:29 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何利用Webpack的externals配置选项来在项目运行时动态加载依赖，以此减少Vue项目构建后的体积。配置包括修改public/index.html文件和在vue.config.js中设置externals，特别指出键名应与引入语句匹配，值则视情况而定。例如，对于Element UI，键名为'element-ui'，值为'ElementUI'。根据测试，无需注释掉原本的依赖引入语句，这与一些博客中的做法不同，并引用了webpack官方文档作为支持。

webpack（vue-cli 自带）中的 externals 配置选项提供了从输出的 bundle 中排除依赖的方法。防止将某些（自己配置）依赖打包，而是在项目运行时（runtime）从外部加载这些依赖。

最直观的：减小 vue 项目 build 后的体积。

配置 index.html

配置项目中的 public/index.html 文件，在其中的 head 标签中添加如下：

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>