vue 關於那些所謂的按需加載

一、路由按需加載

1.按需加載對比

①.路由未按需加載前vebdor.js和app.js都異常大，超過vue理想大小，如下圖：

②.路由按需加載後體積明顯控制在1MB內，如下圖：

路由按需加載後，會把原來的js，切分-分開成小的js文件，一但你需要訪問該模塊或者頁面時纔會加載對應的資源，一定程度上對首次訪問起了很多的優化加速左右

2.按需加載方法

①：直接寫入

 {
      path: '/',
      component: resolve => require(['../components/common.vue'], resolve),
      meta: { title: '足球'},
      redirect: '/home',
      children:[
        {
          path: '/home',
          name:'home',
          component: resolve => require(['../page/home/home.vue'], resolve),
          meta: { title: '首頁',animate:false}
        },
        {
          path: '/home/detail',
          name:'homeDetail',
          component: resolve => require(['../page/home/detail.vue'], resolve),
          meta: { title: '詳情',animate:true}
        },
      ]
    }

 

②：import

// 下面3行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const Register = () => import("@/components/login/register");
const SetPassword = () => import("@/components/login/setpassword");
const SetNickName = () => import("@/components/login/setNickName");

// 下面3行代碼，指定了相同的webpackChunkName，會合並打包成一個js文件。 把組件按組分塊
const Register = () => import(/* webpackChunkName: 'login' */ "@/components/login/register");
const SetPassword = () => import(/* webpackChunkName: 'login' */ "@/components/login/setpassword");
const SetNickName = () => import(/* webpackChunkName: 'login' */ "@/components/login/setNickName");

 {
        path: '/login/register',
        component: Register,
        name: 'Register',
        meta: {
          index: 5
        }
      }, {
        path: '/login/setpassword',
        component: SetPassword,
        name: 'SetPassword',
        meta: {
          index: 6
        }
      }, {
        path: '/login/setnickname',
        component: SetNickName,
        name: 'SetNickName',
        meta: {
          index: 7
        }
      }

③：webpack提供的require.ensure()，此例借鑑csdn上的某位博主的內容，

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'chunkName1')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'chunkName2')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'chunkName3')
}

尾部的chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。通過提供 require.ensure() 不同執行點相同的名稱，我們可以保證所有的依賴都會一起放進相同的 文件束(bundle)

 

-------------------------------------------------------------------------------分割線--------------------------------------------------------------------------

二、UI組件按需加載

前文：開發vue項目都喜歡使用一些UI來協助我們工作比如vant、elementUI，對於UI如果不按需引入那麼打包時會把整個UI包打到我們項目中，隨便一個都時上M的，這是老闆不希望看到的，於是乎我們要什麼引入什麼纔是優化的主流....

1.移動端 Vue 組件庫

直接要用的頁面引入

配置.babelrcy頁面裏的plugins：

"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]

<script>
  import { Cell,CellGroup } from "vant";
  export default {
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
    },
    data() {
      return {
        loading: false,
      };
    },
    methods: {
      
    },
    mounted() {
      let _this = this;
    }
  };
</script>

<van-cell-group>
  <van-cell title="單元格" value="內容" />
  <van-cell title="單元格" value="內容" label="描述信息" />
</van-cell-group>

1.elementUI 

1.安裝 babel-plugin-component ,此插件適用大部分UI按需引入，比如iview：

npm install babel-plugin-component -D

2.將根目錄下 .babelrc文件 修改爲：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.調用方法：

①：官方文檔：main.js裏寫入

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

②：同上vantUI 直接在頁面引入（個人比較喜歡的方法）