狗万官网酒店 > 狗万官网下载 > 详解Webpack如何引入CDN链接来优化编译后的面积_javascript艺术

详解Webpack如何引入CDN链接来优化编译后的面积_javascript艺术

来源: 2019-08-04 19:43 我来投稿 参与评论
这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的面积,文中通过示范代码介绍的独特详细,对大家的上学或者工作具有原则性的参考学习价值,要求的朋友们下面随着小编来累计学习学习吧

前景

在 Vue 品种中,引入到工程中的所有 js 文件,编译时都会把打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,定点水平上影响着页面的渲染。为了削减编译后的面积,加强页面渲染速度,咱可以通过引入 CDN 链接把库分离,多点程异步 js 库,据此达到加速渲染的目的。这就是说我们如何做呢?

步骤

1.引入CDN链接

在品种的 index.html 外方,正常方式引入 CDN 链接,此地以 vue 和 element-ui 为例:

<body>
 <div id="app"></div>
 <!-- CDN主意引入vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- CDN主意引入element-ui -->
 <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
</body>

2.补externals属性

Vue-cli 2

在品种的 build/webpack.base.conf.js 外方,在下合适位置添加 externals 相关语句,在 entry 后面加入即可:

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
 function: './src/main.js'
 },
 externals:{
 'vue': 'Vue',
 'element-ui': 'ElementUI'
 }
 ...
}

Vue-cli 3

在品种根目录的 vue.config.js 外方,名将 configureWebpack 布局代码块添加进入即可:

module.exports = {
 configureWebpack:{
 externals: {
  'vue': 'Vue',
  'element-ui': 'ElementUI'
 }
 }
}

瞩目:在上述代码中,'vue': 'Vue' 对应形式为 key : value,其中 key 为项目中援引的称呼,而 value 是水源本身定义之称呼(不得改),正常情况下我们可以参照 src/main.js 开展查看:

import Vue from 'vue'
import ElementUI from 'element-ui'
//开辟src/main.js翻开以上两趟代码,人家前面作为value,后面作为key。

3.诠释import及Vue.use(xxx)

在品种的 src/main.js 外方,诠释掉以下语句:

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

// Vue.use(ElementUI)

注:利用 eslint 规则的档次请不要注释 import 及 Vue.use,除非你不利用那烦人的 eslint。

做到上述步骤后就足以开始实行 npm run build,你会发现编译后的 vendor.js 副几百K降到几十K,也就意味着优化体积已经成效。 此外,有成百上千网友先前为了削减体积就已经部署了 按需引入,如果引入 CDN 此后,记得把按需引入的安排去掉哦,因为引入 CDN 此后就不存在按需引入这种说法啦!

上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?
  1.     
    &lt;menuitem id="4c11bfdb"&gt;&lt;/menuitem&gt;