vue性能優化2--引入cdn

時間 2019-12-06

標籤 vue 性能優化引入 cdn 欄目系統性能简体版

原文原文鏈接

當咱們加載頁面時，須要將咱們所須要的一些依賴加載到當前會話中而後再開始執行，若是咱們首屏，模塊比較可能是，須要等待的時間會比較長，並且。瀏覽器內存最多執行四十個進程，須要等到加載完前面的才能執行後面的代碼，若是咱們採用cdn的方式來引入一些第三方資源，就能夠緩解咱們服務器的壓力，原理是將咱們的壓力分給其餘服務器點。css

配置
首頁引入這些cdn，index.htmlhtml

<!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">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <title>mytest</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but mytest 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>

而後在vue.config.js添加webpack的externals屬性便可vue

module.exports = {
    baseUrl:'./',
    configureWebpack: {
        //使用cdn，不想讓webpack打包進去
        externals: {
            "vue": "Vue",
            "vue-router": "VueRouter"
        }
    },
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
    }
}