vue项目优化(通过externals加载外部CDN资源)

最新推荐文章于 2022-11-29 15:10:07 发布

weixin_42232876

最新推荐文章于 2022-11-29 15:10:07 发布

阅读量669

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42232876/article/details/109479954

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在发布模式下，使用externals配置项，可以使所配置的插件不会被打包进js文件中，同时我们需要在public/index.html文件的头部，添加这些未被打包的CDN资源引用

vue.config.js

module.exports = {
  // 修改webpack默认打包入口
  chainWebpack: config => {
    // 生产模式(发布模式)
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>document</title>
    <!-- 引入样式表文件(cdn) -->
    <!-- nprogress的样式表文件 -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css"
      rel="stylesheet"
    />
    <!-- 富文本编辑器(quill)的样式表文件 -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.core.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.snow.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.bubble.min.css"
      rel="stylesheet"
    />
    <!-- element-ui的css文件 -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css"
      rel="stylesheet"
    />

    <!-- 引入js文件(cdn) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器(quill)的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/quill/1.3.7/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <!-- element-ui的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

weixin_42232876

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue项目优化(通过externals加载外部CDN资源)

在发布模式下，使用externals配置项，可以使所配置的插件不会被打包进js文件中，同时我们需要在public/index.html文件的头部，添加这些未被打包的CDN资源引用vue.config.jsmodule.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config =
复制链接

扫一扫

专栏目录