vue typescript multi pages

vue-typescript-multi-pages

typescript + vue multi-page application configuration and build optimization

Project directory structure:

├── public                     // 静态打包文件
├── scripts                    // 自动创建脚本
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── config                 // 配置相关
│   ├── utils                  // 全局公用方法
│   ├── icons                  // 全局svg组件
│   │── pages                  // 业务模块根目录modules
│   │	  ├── demo               // 页面
│           ├── app.vue        // 入口页面
│           └── main.ts        // 入口初始化
│   │		└── index              // 页面
├── .gitignore                 // git 忽略项
├── package.json               // 安装依赖包
├── vue.config.js              // 项目配置
├── README.md                // 文档说明

Function points:

• Configuration of each environment
• Automatically script new pages and components
• Package build optimization (dllPlugin)

Build configuration and optimization

1. Configuration of each environment

Create a new .env.name in the root directory, for example: .env.test file

# just a flag
NODE_ENV = "test"

VUE_APP_TITLE = 'test'

# base url
BASE_URL = "http://xxx.com"

Configure different interface addresses and NODE_ENV according to different environments to facilitate subsequent processing according to the packaging environment configuration.

2. Build optimization

1.webpack dllplugin extracts public libraries and improves packaging speed

1.1 Install webpack and webpack-cli globally

webpack -v

1.2 Generate dll and add it in package.json file

 "scripts" : {
  ...
  "dll" : "webpack -p --progress --config ./webpack.dll.conf.js"
}

Execute generated dll

 yarn run dll

1.3 Create a new webpack.dll.confl.js file in the root directory and install the CleanWebpackPlugin plug-in

 const path = require ( 'path' )
const webpack = require ( 'webpack' )
const { CleanWebpackPlugin } = require ( 'clean-webpack-plugin' )

// dll文件存放的目录
const dllPath = 'public/vendor'

module . exports = {
  entry : {
    // 需要提取的库文件
    vendor : [
      'vue' ,
      'vue-router' ,
      'vuex' ,
      'axios' ,
      'element-ui'
    ]
  } ,
  output : {
    path : path . join ( __dirname , dllPath ) ,
    filename : '[name].dll.js' ,
    // vendor.dll.js中暴露出的全局变量名，保持与 webpack.DllPlugin 中名称一致
    library : '[name]_[hash]'
  } ,
  plugins : [
    // 清除之前的dll文件
    new CleanWebpackPlugin ( ) ,
    // 设置环境变量
    new webpack . DefinePlugin ( {
      'process.env' : {
        NODE_ENV : 'production'
      }
    } ) ,
    new webpack . DllPlugin ( {
      path : path . join ( __dirname , dllPath , '[name]-manifest.json' ) ,
      // 保持与 output.library 中名称一致
      name : '[name]_[hash]' ,
      context : process . cwd ( )
    } )
  ]
}

1.4 Ignore compiled files

To reduce webpack's compilation time for public libraries, add in vue.config.js

 const webpack = require ( 'webpack' )

module . exports = {
  ...
  configureWebpack : {
    plugins : [
      new webpack . DllReferencePlugin ( {
        context : process . cwd ( ) ,
        manifest : require ( './public/vendor/vendor-manifest.json' )
      } )
    ]
  }
}

1.5 Automatically introduce the generated dll file

Install add-asset-html-webpack-plugin and automatically introduce generated files

 module . exports = {
  ...
  configureWebpack : {
    plugins : [
      ...
      // 将 dll 注入到 生成的 html 模板中
      new AddAssetHtmlPlugin ( {
        filepath : path . resolve ( __dirname , './public/vendor/*.js' ) ,
        // dll 引用路径
        publicPath : './vendor' ,
        // dll最终输出的目录
        outputPath : './vendor'
      } )
    ]
  }
}

There is also GZip压缩and speed-measure-webpack-plugin Please see vue.config.js for details.