vue 多页面应用项目分析

项目技术分析

项目描述

    项目主要分后台管理、移动端、PAD端功能，前端页面也是基于vue进行开发的。前期项目是独立开发，每一个客户端都是独立的项目，所以项目从开发到发布，会针对不同的端做不同的构建，难以协调完整的版本，开发时公用的功能无法复用，产生冗余代码。
    经过对vue的调研，可使用的方式有微前端、多页面应用方式。微前端针对界面框架复用性的能适配，但本项目中采用多页面应用能解决项目中的痛点，同时vue-cli 项目对于多页面有原生的支持。

多页面设计

梳理目录架构

|-- src
|-- asset
|-- components
|-- derectives
|-- lib
|-- moudules
    |-- manager
        |-- index.html
        |-- main.js
        |-- App.vue
    |-- pad
        |-- index.html
        |-- main.js
        |-- App.vue
    |-- mobile
        |-- index.html
        |-- main.js
        |-- App.vue

配置vue.config.js

const path = require('path');
const glob = require('glob');

function getEntry() {
var entries = {};
var items = glob.sync('./src/modules/*/*.js');
for (var i in items) {
    var filepath = items[i];
    var fileList = filepath.split('/');
    var fileName = fileList[fileList.length - 2];
    entries[fileName] = {
    entry: `src/modules/${fileName}/main.js`,
    // 模板来源
    template: `src/modules/${fileName}/index.html`,
    // 在 dist/index.html 的输出
    filename: `${fileName}.html`,
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', fileName]
    };
}
return entries;
}

解决时遇到的问题

性能优化设计

性能查看工具 webpack-bundle-analyzer
可视化分析文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何
使用步骤：
1. 安装： npm install webpack-bundle-analyzer
2. vue.config 配置
```
chainWebpack:config=>{
    if (process.env.NODE_ENV === 'development') {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
    }
}
```

针对vue-cli 4.x项目的配置优化

提取公共库 element-ui

先配置vue.config.js

 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.externals={
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'echarts': 'echarts', 
            'lottie-web': 'lottie',
            'crypto-js':'CryptoJS'
        }
}

再配置src/index.html ，可配合本地js或者在线CDN缓解请求方法，设置如下：

<head>
    ...

    <!-- 生产环境使用cdn方式引入 -->
    <% if (process.env.NODE_ENV === 'production') { %>
    <!-- 引入组件库 -->
    <script src="<%= BASE_URL %>js/vue.min.js"></script>
    <!-- Element UI -->
    <script src="<%= BASE_URL %>js/element.js"></script>
    <script src="<%= BASE_URL %>js/echarts.min.js"></script>
    <script src="<%= BASE_URL %>js/crypto-js.min.js"></script>
    <% } %>
</head>

开发环境正常引入

删除控制台信息。修改configureWebpack增加以下代码：

/** 删除控制台信息 */
config.optimization = {
    minimizer: [
        new TerserPlugin({
            terserOptions: {
            compress: {
                drop_console: true
            }
            }
        })
    ]
}

删除moment除zh-cn中文包外的其它语言包，无需在代码中手动引入zh-cn语言包

//删除moment除zh-cn中文包外的其它语言包，无需在代码中手动引入zh-cn语言包
config.plugin('ignore')
      .use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/));

配合nginx开启gzip 提升访问速度

安装compression-webpack-plugin npm i compression-webpack-plugin

配置vue.config.js

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        // 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
        config.plugins.push(
              new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        )
    }
}

nginx 配置后线上在Response headers 里会有一个Content-Encoding:gzip见下图

serve{
    listen  80;
    ...

    #开启gzip
    gzip on;
    #启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;
    #gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 1;
    #进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    #是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;
    #禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";
    #设置压缩所需要的缓冲区大小
    gzip_buffers 32 4k;
    #设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.0;

}

编译文件名增加时间戳。

为了防止浏览器缓存，获取的js文件未及时更新，确保每次获取的都是最新的代码。

//自定义编译文件名带时间戳，防止缓存
if (process.env.NODE_ENV === 'production') { 
config.output
    .filename(`[name].${TimeStamp}.js`)
    .chunkFilename(`[id].${TimeStamp}.js`)
    .end();
}

posted @ 2021-01-13 22:44 轻舞飞ting 阅读(110) 评论(0) 收藏举报

刷新页面返回顶部

轻舞飞ting

vue 多页面应用项目分析

项目技术分析

项目描述

多页面设计

性能优化设计

公告