记一次前端技术选型和项目优化

时间 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"
  ]
}

复制代码