# manual-build-vue

**Repository Path**: yiyi520/manual-build-vue

## Basic Information

- **Project Name**: manual-build-vue
- **Description**: 不依赖脚手架搭建 vue react 前端项目框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-08-13
- **Last Updated**: 2022-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack5 + vue2.6 + vuex + vue-router

#### 介绍
不依赖脚手架搭建 vue react 前端项目框架

#### 搭建流程
#### 初始化npm配置⽂件以及webpack(版本不匹配去依赖相应的github中找解决方案)
  1. npm init -y
  2. npm install --save-dev webpack
  3. npm install --save-dev webpack-cli

#### 配置webpack.config.js输出对象
  1. entry：打包入口
  2. output： 输出
  3. loader
  4. plugins： 插件
  5. mode： 模式

#### 配置模板文件
  1. npm install --save-dev html-webpack-plugin
  2. npm install --save-dev clean-webpack-plugin

#### sass支持（less stylus配置类似）
  1. style-loader -D
  2. css-loader -D
  3. sass-loader -D
  4. sass -D
  5. postcss -D
  6. postcss-loader -D
  7. cssnano（css压缩） -D
  8. autoprefixer(css前缀补齐) -D
  9. mini-css-extract-plugin(样式抽离) -D

#### 静态资源处理 图片 svg ttf eot woff woff2
  webpack[资源模块](https://webpack.docschina.org/guides/asset-modules/)

#### Babel && polyfill(线上依赖)
  1. 安装@babel/core   babel-loader   -D
    npm install --save-dev babel-loader @babel/core
  2. 安装Preset部门 -D
      @babel/preset-env : 编译js语法; 
      @babel/preset-react ：编译react语法 JSX; 
      @babel/preset-typescript： 编译ts语法; 
      @babel/preset-flow： 编译flow语法; 
      @vue/babel-preset-jsx vue2 jsx; 
      （
        A:useage：babel7的新功能，自动检测，不需要手动写上 import “polyfill”; 
        B:enrty：入口文件需要写入import polyfill；根据代码的使用情况，导入相应的垫片; 
        C：false：不会排除没有使用到的特性，体积会变大 ;
        ）
  3. ES6+ 特性处理
      core-js.js --->库，包含es6+新特性的库（垫片操作polyfill）; 
      安装 @babel/polyfill -S（线上依赖代码会打包bundle文件中）;
      无冗余 按需导入;

#### 安装react react-dom
#### Vue项目构建 Vue CLI
   1. vue -S
   2. vue-loader -D
   3. vue-template-compiler -D
   4. [参考文档](https://vue-loader.vuejs.org/zh/guide/#vue-cli)

#### WebpackDevServer vuex router axios
   1. webpack-dev-server -D
   2. vuex -S
   3. vue-router -S
   4. axios -D

#### Hot Module Replacement (HMR:热模块替换)
    devServer: {
      hot:true,
    }
    const webpack = require("webpack")
    new webpack.HotModuleReplacementPlugin()
#### mock 
  1. express -D

#### 多环境部署
  1. dotenv -D
  2. DefinePlugin


#### 项目优化------------------------------------------

#### 优化的目的： 1.优化开发体验； 2.优化输出质量；
  1. 导言： 缩小文件搜索范围：loader plugin是两个耗时大户，要优化构建过程，可以减少查找过程、多线程、提前编译和Chche多角度来优化；  
  2. 优化loader查找范围：test include exclude三个配置(include: path.resolve(__dirname, "./src"))；  
  3. 优化resolve.modules配置：   
    module.exports={  
    --resolve:{  
    ----modules: [path.resolve(__dirname, "./node_modules")]  
    --}   
    }  
  4. 优化resolve.alias配置 别名导入 alias；  
  5. 优化resolve.extensions配置 制定导入文件自动带上后缀（extensions:['.js','.json','.jsx','.ts']）；  
  6. thread-loader 多线程优化: thread-loader 是针对 loader 进⾏优化的，它会将 loader 放置在⼀个 worker 池⾥⾯运⾏，但是他本地有一定的性能损耗  
  7. 缓存cache相关cacheDirectory || hard-source-webpack-plugin  
  8. 压缩速度优化terser-webpack-plugin  
  9. 使⽤externals优化cdn静态资源,我们可以将⼀些JS⽂件存储在 CDN 上(减少 Webpack 打包出来的 js 体积)  
  10. 使⽤静态资源路径publicPath(CDN)  
  11. 基于环境变量区分 mode: production 默认压缩js、html、css  
      1. css压缩 借助 optimize-css-assets-webpack-plugin cssnano  
      2. html压缩 借助 html-webpack-plugin  
      3. JS压缩 借助 terser-webpack-plugin  
  12. tree Shaking：擦除⽆⽤的JS,CSS
      1. Css tree shaking 借助 npm install purgecss-webpack-plugin glob-all -D  
      2. Js tree shaking 只要mode是production就会⽣效  
      3. sideEffects 处理副作⽤[在数组⾥⾯排除不需要tree shaking的模块]  
  13. 代码分割 code Splitting
  14. 作⽤域提升 (Scope Hoisting)是指 webpack 通过 ES6 语法的静态分析，分析出模块之间的依赖关系，尽可能地把模块放到同⼀个函数中  
  15. 使用工具量化  
      1. speed-measure-webpack-plugin:可以测量各个插件和 loader 所花费的时间  
      2. webpack-bundle-analyzer:分析webpack打包后的模块依赖关系