1.     
    <menuitem id="4c11bfdb"></menuitem>

    1. <u id="89e92426"></u>



    2. 狗万官网酒店 > 狗万官网下载 > 详解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)
      机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
      地名: 匿名?