2.通过externals加载外部CDN资源

张飞飞啦啦

已于 2022-06-20 11:09:24 修改

阅读量932

点赞数 1

分类专栏： Vue项目优化文章标签： vue.js webpack 前端

于 2022-03-07 00:57:12 首次发布

本文链接：https://blog.csdn.net/weixin_55959870/article/details/123319946

版权

Vue项目优化专栏收录该内容

5 篇文章 1 订阅

订阅专栏

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

jsDelivr - A free, fast, and reliable CDN for open source

搜CDN网站

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在
externals中的第三方依赖包，都不会被打包。

项目中

顺便做下判断是开发还是发布判断的页面显示

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改默认打包main
  chainWebpack: config => {
    // 发布
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      // 自动查找js文件从public的index.html中找
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      // 配置网页标题处于发布就true,开发isProd=false 判断如何渲染页面结构
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      // 配置网页标题处于发布就true,开发isProd=false
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
})

然后在index.html页面把需要的配置下.第三步就省略了，顺便把elementui也引过来,

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet"/>
    <!-- 富文本编辑器 的样式表文件 -->
    <link href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" rel="stylesheet"/>
    <link href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" rel="stylesheet"/>
    <link href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" rel="stylesheet"/>
    <!-- element-ui 的样式表文件 -->
    <link href="https://cdn.staticfile.org/element-ui/2.6.3/theme-chalk/index.css" rel="stylesheet"/>

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/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.staticfile.org/element-ui/2.6.3/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>

然后把main-prod.js中的注释掉

张飞飞啦啦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2.通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。项目中顺便做下判断是开发还是发布判断的页面显示const { defineConfig } = require('@vue/cli-service')module.exports = defineC...
复制链接

扫一扫