記一次前端技術選型和項目優化

時間 2019-12-08

標籤一次前端技術選型項目優化简体版

原文原文鏈接

技術選型和項目優化

import 'amfe-flexible'
import '../../common/css/base.less';
import Vue from 'vue'
import App from './App.vue'
import fastclick from 'fastclick'
import VueLazyload from 'vue-lazyload'
import CreateAPI from 'vue-create-api'
import Toast from 'components/Toast.vue'
import { setupWebViewJavascriptBridge } from 'common/js/util'

// 第三方組件庫cube
const { Dialog } = window.cube;
Vue.use(Dialog);

Vue.use(CreateAPI);
// yjk自定義全局組件 - toast
Vue.createAPI(Toast, true);

fastclick.attach(document.body)
Vue.config.productionTip = false

Vue.use(VueLazyload, {
    preLoad: 1.3,
    loading: require('common/img/default.png')
})

setupWebViewJavascriptBridge((bridge) => { })

new Vue({
    render: h => h(App)
}).$mount('#app');

複製代碼

項目使用到的第三方庫依賴有：javascript

flexible：flexible.js 移動端自適應方案；移動端佈局css
fastclick：在檢測到touchend事件的時候，會經過DOM自定義事件當即出發模擬一個click事件，並把瀏覽器在300ms以後真正的click事件阻止掉；html
vue-lazyload： VUE圖片懶加載-vue lazyload插件使用 vue懶加載vue

vue-create-api： vue-create-api 一個可以讓 Vue 組件經過 API 方式調用的插件。作本身的組件庫用java

import CreateAPI from 'vue-create-api' 
  import Toast from 'components/Toast.vue'
  Vue.use(CreateAPI);
  // 自定義全局組件 - toast
  Vue.createAPI(Toast, true);
  在js內部和 vue文件內部均可以被調用；
複製代碼

關於引用外部第三方庫的解決方案：node

考慮到每一個插件都不是很大，大概10K左右， 若是經過外部連接的方式去加載， 比較浪費帶寬。
解決方案 把這個js經過webpack打包成一個公共的js文件；chunk-vendors.js 文件的形式
複製代碼

關於第三方組件庫的優化方案：android

如今使用的是cube-ui的組件庫；在使用組件庫的時候，能夠選擇後編譯和按需加載組件；
複製代碼

在.babelrc文件下
// 經過後編譯的方式引入 組件庫，且是輕量的
    {
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime", 
    [
      "transform-modules", {
        "cube-ui": {
          "transform": "cube-ui/src/modules/${member}",
          "kebabCase": true
        }
      }
    ]
  ]
}

複製代碼

可是在實際的開發過程當中發現， 使用組件庫的場景並無那麼多， 而使用最多的是他的toast組件， 所以這個庫也能夠作優化；
經過js加載並掛載在window對象下， 按需加載， 須要時候才引用；簡單的功能儘可能用自家的組件去完成；
// 第三方組件庫cube
const { Dialog } = window.cube;
Vue.use(Dialog);
複製代碼

preload屬性

關於vue.config.js的配置webpack

const path = require('path');
// 引入多頁配置js文件；
返回pages： {
  multipage:
   { entry:
      'C:\\Ben\\src\\pages\\multipage/index.js',
     template:
      'C:\\Ben\\src\\pages\\multipage/index.html',
     filename: 'multipage/index.html' },
  singlepage:
   { entry:
      'C:\\Ben\\src\\pages\\singlepage/index.js',
     template:
      'C:\\Ben\\src\\pages\\singlepage/index.html',
     filename: 'singlepage/index.html' } }
     
const pages = require('./config/multipage').getPages();
// 環境變量
const env = process.env.NODE_ENV;

module.exports = {
    // 在開發環境使用 / 目錄，由於在內存裏的dist根目錄下，線上環境取'./',由於部署時會取整個dist目錄下的文件
    baseUrl: env === 'development' ? '/' : './',
    lintOnSave: false,
    productionSourceMap: false,
    // 在多核機器下會默認開啓。
    parallel: require('os').cpus().length > 1,
    pages,
    // css相關配置
    css: {           
        // 默認值是(開發環境保證正常css熱更新，不分離，線上環境可抽離) 
        // 是否使用css分離插件 ExtractTextPlugin
        // extract: env === 'development' ? false : true,    
        sourceMap: false, // 開啓 CSS source maps?
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        },             // css預設器配置項
        modules: false // 啓用 CSS modules for all css / pre-processor files.
    },
// 一些配置，保證輸出結果按照 配置後的輸出
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.module.rule('images').use('url-loader').loader('url-loader').tap(options => {
                options.name = 'static/img/[name].[hash:8].[ext]';
                return options;
            });
            config.plugin('extract-css').tap(() => [
                {
                    filename: 'static/css/[name].[contenthash:8].css',
                    chunkFilename: 'static/css/[name].[contenthash:8].css'
                }
            ]);
        } 
    },
// 一些配置，保證輸出結果按照 配置後的輸出
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.path = path.join(__dirname, './dist')
            config.output.filename = 'static/js/[name].[contenthash:8].js'
            // config.output.publicPath = './'
            config.output.chunkFilename = 'static/js/[name].[contenthash:8].js'
        } 
        
        // 開發生產共同配置
        Object.assign(config, {
            // webpack編譯打包時不處理它，卻能夠引用到它，這兩個經過外部連接去引用，以減小公共包的體積
            [https://segmentfault.com/a/1190000012113011]
            (https://blog.csdn.net/zlingyun/article/details/81382323)
            externals: [
                {'vue': 'window.Vue'},
                {'vue-router': 'window.VueRouter'}
            ],
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    'assets': path.resolve(__dirname, './src/assets'),
                    'common': path.resolve(__dirname, './src/common'),
                    'components': path.resolve(__dirname, './src/components'),
                    'pages': path.resolve(__dirname, './src/pages'),
                    'vue$': 'vue/dist/vue.esm.js'
                }
            }
        });
    }
};

複製代碼

關於package.json的配置ios

{
  "name": "vue-multipage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --open",
    "lint": "vue-cli-service lint",
    "vue inspect > output.js": "審查項目的 webpack 配置",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "axios": "^0.17.1",
    "fastclick": "^1.0.6",
    "md5": "^2.2.1",
    "vue-create-api": "^0.2.0",
    "vue-lazyload": "^1.2.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.0.0",
    "@vue/cli-plugin-eslint": "3.0.0",
    "@vue/cli-service": "3.0.0",
    "ali-oss": "^6.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "postcss-px2rem": "^0.3.0",
    "vue-template-compiler": "^2.5.17"
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  // eslint配置
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  // css處理
  "postcss": {
    "plugins": {
      "autoprefixer": {},  // 就是自動補全css前綴 https://www.jianshu.com/p/aa3e52be303e
      "postcss-px2rem": {  // https://www.jianshu.com/p/21d43d6ed713
        "remUnit": 75      // 由於我是根據ip6作的佈局方案， 因此這裏使用的是750/10 = 75
      }
    }
  },
  "browserslist": [ // browserslist 目標瀏覽器配置表 https://www.jianshu.com/p/bd9cb7861b85
    "> 1%",
    "last 4 versions",
    "not ie <= 8",
    "ios >= 7",
    "android >= 4.0"
  ]
}

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。