vue项目打包时配置externals，忽略打包第三方库（前端性能优化方案）

最新推荐文章于 2024-05-21 15:45:11 发布

阿炜死了

最新推荐文章于 2024-05-21 15:45:11 发布

阅读量1.4w

点赞数 7

文章标签： vue web javascript 网络优化内存优化

本文链接：https://blog.csdn.net/xzwwjl1314/article/details/108233321

版权

在vue.config.js里这样写

const isProduction = process.env.VUE_APP_MODE === 'production'

const cdn = {
  // 忽略打包的第三方库
  /**
  * externals 对象属性解析：
  * '包名' : '在项目中引入的名字'
  * 以element-ui举例 我再main.js里是以
  * import ELEMENT from 'element-ui'
  * Vue.use(ELEMENT, { size: 'small' })
  * 这样引入的，所以我的externals的属性值应该是ELEMENT
  */
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
  },
  js: [
    'https://cdn.jsdelivr.net/npm/vue',
    'https://unpkg.com/vue-router/dist/vue-router.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
    'https://unpkg.com/element-ui@2.13.2/lib/index.js'
  ],
  css: [
    'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
  ]
}

module.exports = {
	chainWebpack: (config) => {
		if (isProduction) {
	      config.plugin('html').tap((args) => {
	        args[0].cdn = cdn
	        return args
	      })
    	}
    	config.plugin('html').tap(args => { // 所有环境配置统一的title
	        args[0].title = '外部联网协议配置系统'
	        return args
      })
	}

	configureWebpack: config => {
		config.externals = cdn.externals
	}
}

在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">
    <link rel="stylesheet" href="./reset.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
  </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 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

这样就成功的配置了生产环境第三方库采用cdn引入。能有效减小打包出来的文件体积，我的从2.6MB => 1.7MB ，减少了34%

阿炜死了

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
20
评论
vue项目打包时配置externals，忽略打包第三方库（前端性能优化方案）

在vue.config.js里这样写const isProduction = process.env.VUE_APP_MODE === 'production'const cdn = { // 忽略打包的第三方库 /** * externals 对象属性解析： * '包名' : '在项目中引入的名字' * 以element-ui举例我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { si
复制链接

扫一扫