[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐 @地瓜大的飛翔旅程

章節連結

整合內容
分類細項

package.json
babel.config.js ( 7.4 以後適用)
main.js
./plugins/vuetify.js
Vue.config.js

參考資料

Vue 搭配 Vuetify 建立專案，在最後打包 Build 的過程中，會有一系列的調教設定過程。這其中包含了 Babel (瀏覽器向下相容) 、Tree-Shaking (按需載入) 和打包細項 ( Vue-Cli 以 Webpack 為基礎，讓打包編譯變得容易)。這篇會筆記下 package.json 的相依檔案清單、Babel 與 Vuetify 引入的設定註解。

整合內容

Vue, Vuetify, Vuex, Google Material Icon Fonts(Roboto-fontface), Babel 7.4 以後版本 (Core-js + regenerator-runtime), Day.js (moment.js 的後繼者)

分類細項

package.json

{
    "name": "client-src",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "report": "vue-cli-service build --report" // 使用 npm run report 來生成報告瀏覽 js 檔案預覽
    },
    "dependencies": {
        "@mdi/font": "^5.8.55",
        "core-js": "^3.6.5",
        "css-vars-ponyfill": "^2.4.2", // 讓 IE11 可以使用 css 原生變數語法
        "dayjs": "^1.9.7", // 
        "regenerator-runtime": "^0.13.7",
        "roboto-fontface": "*",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0",
        "vuetify": "^2.2.11",
        "vuex": "^3.4.0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^6.2.2",
        "node-sass": "^4.12.0",
        "prettier": "^1.19.1",
        "sass": "^1.19.0",
        "sass-loader": "^8.0.2",
        "vue-cli-plugin-vuetify": "~2.0.8",
        "vue-template-compiler": "^2.6.11",
        "vuetify-loader": "^1.6.0"
    }
}

{

"name": "client-src",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint",

"report": "vue-cli-service build --report" // 使用 npm run report 來生成報告瀏覽 js 檔案預覽

"dependencies": {

"@mdi/font": "^5.8.55",

"core-js": "^3.6.5",

"css-vars-ponyfill": "^2.4.2", // 讓 IE11 可以使用 css 原生變數語法

"dayjs": "^1.9.7", //

"regenerator-runtime": "^0.13.7",

"roboto-fontface": "*",

"vue": "^2.6.11",

"vue-router": "^3.2.0",

"vuetify": "^2.2.11",

"vuex": "^3.4.0"

"devDependencies": {

"@vue/cli-plugin-babel": "~4.5.0",

"@vue/cli-plugin-eslint": "~4.5.0",

"@vue/cli-plugin-router": "~4.5.0",

"@vue/cli-plugin-vuex": "~4.5.0",

"@vue/cli-service": "~4.5.0",

"@vue/eslint-config-prettier": "^6.0.0",

"babel-eslint": "^10.1.0",

"eslint": "^6.7.2",

"eslint-plugin-prettier": "^3.1.3",

"eslint-plugin-vue": "^6.2.2",

"node-sass": "^4.12.0",

"prettier": "^1.19.1",

"sass": "^1.19.0",

"sass-loader": "^8.0.2",

"vue-cli-plugin-vuetify": "~2.0.8",

"vue-template-compiler": "^2.6.11",

"vuetify-loader": "^1.6.0"

}

babel.config.js ( 7.4 以後適用)

module.exports = {
    presets: [
        [
            '@vue/cli-plugin-babel/preset', // Promise polyfill 已經內含，無須額外引入
            {
                useBuiltIns: 'usage', // 此為預設值，若在引入點內載入，則改為 'entry'
            },
        ],
    ],
};

module.exports = {

presets: [

[

'@vue/cli-plugin-babel/preset', // Promise polyfill 已經內含，無須額外引入

{

useBuiltIns: 'usage', // 此為預設值，若在引入點內載入，則改為 'entry'

};

main.js

// babel for IE11, if you are using 'useBuiltIns':'entry', you should add these following two lines.
// These should be in front of all vue-related modules.
import 'core-js'
import 'regenerator-runtime'

// css polyfill for IE11
import cssVars from 'css-vars-ponyfill';
cssVars();

// packages
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// import customised Vuetify
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    vuetify,
    render: (h) => h(App),
}).$mount(`#app`);

// babel for IE11, if you are using 'useBuiltIns':'entry', you should add these following two lines.

// These should be in front of all vue-related modules.

import 'core-js'

import 'regenerator-runtime'

// css polyfill for IE11

import cssVars from 'css-vars-ponyfill';

cssVars();

// packages

import Vue from 'vue';

import App from './App.vue';

import router from './router';

import store from './store';

// import customised Vuetify

import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({

router,

store,

vuetify,

render: (h) => h(App),

}).$mount(`#app`);

./plugins/vuetify.js

用 npm 安裝 Material Icon 字型時，若為 Vuetify 2.x 系列的版本，須改用 iconfont: ‘mdi’ 並安裝 @mdi/font

import Vue from 'vue';
import Vuetify from 'vuetify/lib'; // for tree-shaking

Vue.use(Vuetify);

// css & fonts
import 'roboto-fontface/css/roboto/roboto-fontface.css';
import '@mdi/font/css/materialdesignicons.css'; 

export default new Vuetify({
    icons: {
        iconfont: ['mdi'],
    },
});

import Vue from 'vue';

import Vuetify from 'vuetify/lib'; // for tree-shaking

Vue.use(Vuetify);

// css & fonts

import 'roboto-fontface/css/roboto/roboto-fontface.css';

import '@mdi/font/css/materialdesignicons.css';

export default new Vuetify({

icons: {

iconfont: ['mdi'],

});

Vue.config.js

module.exports = {
    outputDir: '../wwwroot',
    css: {
        extract: true, // 是否要抽離 css，若為否，所有 css 都會內聯在 js 中。預設為 true
        sourceMap: process.env.VUE_APP_ENV === 'production' ? false : true, // 是否要生成 sourceMap，預設為 false。建議在開發情況下打開
    },
    configureWebpack: {
        optimization: {
            splitChunks: { // chunk 的檔案大小，最大不超過 250kb
                minSize: 10000,
                maxSize: 250000, 
            },
        },
        performance: {
            hints: false, // 決定是否開啟效能警告
            maxEntrypointSize: 512000, // 預設值為 244Kib，若超過會跳警告
            maxAssetSize: 512000,
        },
    },
    productionSourceMap: false, // production 環境下，是否生成 sourceMap。對 js 而言，預設為 true，建議可關閉
    publicPath: './',
    transpileDependencies: ['vuetify'], // babel 預設不會讀取 node_modules，若你有套件需要編譯的，可在這邊設定
};

module.exports = {

outputDir: '../wwwroot',

css: {

extract: true, // 是否要抽離 css，若為否，所有 css 都會內聯在 js 中。預設為 true

sourceMap: process.env.VUE_APP_ENV === 'production' ? false : true, // 是否要生成 sourceMap，預設為 false。建議在開發情況下打開

configureWebpack: {

optimization: {

splitChunks: { // chunk 的檔案大小，最大不超過 250kb

minSize: 10000,

maxSize: 250000,

performance: {

hints: false, // 決定是否開啟效能警告

maxEntrypointSize: 512000, // 預設值為 244Kib，若超過會跳警告

maxAssetSize: 512000,

productionSourceMap: false, // production 環境下，是否生成 sourceMap。對 js 而言，預設為 true，建議可關閉

publicPath: './',

transpileDependencies: ['vuetify'], // babel 預設不會讀取 node_modules，若你有套件需要編譯的，可在這邊設定

};

參考資料

1. Vue项目兼容IE11
2. css-vars-ponyfill
3. @babel/polyfill
4. [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)–3(完)
5. 如何正確的設置babel(Late 2018)
6. Babel 筆記 (7.7.0 之後)
7. SASS, LESS 退散，原生 CSS 可以使用變數啦！
8. [Vue] 跟著 Vue 闖蕩前端世界 – 15 執行檔案瘦身計畫
9. How to break the js files into chunks in vue cli 3 with webpack performance object?
10. Webpack 4 “size exceeds the recommended limit (244 KiB)”
11. Vuetify icons not showing correctly: they appear as as “$vuetify.icons…”
12. Webfont – Material Design Icons
13. Configuration Reference
14. Vuetify Treeshaking

按讚加入粉絲團