项目优化

小程序

分包处理、分包预加载

https://www.pianshen.com/article/69841665695/

https://www.cnblogs.com/whenwei123/p/14134517.html

app.json

json

{
  "pages":[ //主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [  //分包
    {
      "root": "songPackage", //分包根的目录
      "pages": [
        "pages/recommendSong/index", 
        "pages/songDetail/index" //分包页面路径，相对与分包根目录
      ]
    }, {
      "root": "otherPackage", //分包根的目录
      "pages": [
        "pages/other/index" //分包页面路径，相对与分包根目录
      ]
    }
  ]
}
// 分包预加载
"preloadRule": {
　　"pages/index/index": {
      "network": "all", // all (不限网络)/wifi (仅wifi下预下载)
      "packages": ["songPackage"]
  　},
}

vue

gzip压缩

https://www.jianshu.com/p/d765b4cda63b

gizp压缩是一种http请求优化方式，

通过减少文件体积来提高加载速度。

html、js、css文件甚至json数据都可以用它压缩，

可以减小60%以上的体积。

1 安装依赖

npm i compression-webpack-plugin -D

2 vue.config.js中的配置

javascript

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
...
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

3服务端开启gzip

代码分割code split

https://www.jianshu.com/p/c42a817dc8cf4

Entry Points进行代码分割，但如果分割的代码引用了相同的依赖包，就会造成冗余

所以需要CommonsChunkPlugin这个插件把共用的依赖包抽取成一个新的bundle（班豆）

详细看webpack文档

Entry Points

这种是最简单也是最直观的代码分割方式，但是会存在一些问题。

方法就是在 webpack 配置文件中的 entry 字段添加新的入口：

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

CommonsChunkPlugin

module.exports = {
  。。。
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // bundle 名称
    })
  ],
  。。。
};

Dynamic Imports

Webpack 的动态分割主要方式是使用符合 ECMAScript 提案的 import() 语法。语法如下

import('path/to/module') -> Promise

传入模块的路径，import() 会返回一个Promise。这个模块就会被当作分割点。意味着这个模块和它的子模块都会被分割成一个单独的 chunk。并且，在 webpack 配置文件的 output 字段，需要添加一个 chunkFileName 属性。它决定非入口 chunk 的名称。

// vue-cli 生成的webpack.prod.conf.js
// 注意 output 的 chunkFilename 属性
// 这种写法分割出来的 bundle 会以 id + hash 的命名方式
// 比如 1.32326e28f3acec4b3a9a.js
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

使用 babel缓存

https://blog.csdn.net/kouzuhuai2956/article/details/108078484

babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，

造成代码体积大冗余，同时也会减慢编译效率

可以加上cacheDirectory参数

或者使用babel-plugin-transform-runtime

详情看webpack文档

dll 打包

cli2

https://blog.csdn.net/przlovecsdn/article/details/82761912

https://blog.csdn.net/weixin_40970987/article/details/108295765

cli3

vue-cli3中webpack.dll打包优化

提升构建速度的方法（一）——DllPlugin

dll打包多个入口

此时先构建webpack.dll.conf.js，执行完毕产出vendor.dll.js和vendor.manifest.js两个文件。webpack.DllReferencePlugin引用manifest.json

javascript

报错：Error: DllPlugin: supply an Array as entry
局部安装webpack-cli 入口js需要是数组

编译移除console

安装依赖

babel-plugin-transform-remove-console

javascript

// babel.config.js
const productionPlugins = []
if (process.env.NODE_ENV === 'production') {
  productionPlugins.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productionPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

vue.config.js 配置开发入口打包入口

javascript

module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production'), config => {
            config.entry('app').clear().add('./src/main-prod.js')
        }
        config.when(process.env.NODE_ENV === 'development'), config => {
            config.entry('app').clear().add('./src/main-dev.js')
        }
    }
}

CDN +externals优化

http://www.52codes.net/develop/javascript/57739.html

1.引入CDN链接

在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例：

<body>
 <div id="app"></div>
 <!-- CDN方式引入vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- CDN方式引入element-ui -->
 <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
</body>

2添加externals属性

javascript

// Vue-cli 2 
// 在项目的 build/webpack.base.conf.js 中，在下面合适位置添加 externals 相关语句，在 entry 后面加入即可：
module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
 function: './src/main.js'
 },
 externals:{
   'vue': 'Vue',
   'element-ui': 'ElementUI'
 }
 ...
}
// Vue-cli 3
// 在项目根目录的 vue.config.js 中，将 configureWebpack 配置代码块添加进入即可：
module.exports = {
 configureWebpack:{
   externals: {
    'vue': 'Vue',
    'element-ui': 'ElementUI'
   }
 }
}

Vue-cli 3 chainWebpack

module.exports = {
    chainWebpack:config=>{
        //发布模式
        ...复制下面

            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //开发模式
        ...复制上面
    }
}

3.注释import及Vue.use(xxx)

在项目的 src/main.js 中，注释掉以下语句：

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

// Vue.use(ElementUI)

注：使用 eslint 规则的项目请不要注释 import 及 Vue.use，除非你不使用那烦人的 eslint。

完成后执行 npm run build，你会发现编译后的 vendor.js 从几百K降到几十K，也就意味着优化体积已经成效。

如果引入 CDN 之后，记得把按需引入的配置去掉哦，因为引入 CDN 之后就不存在按需引入这种说法啦！

定制首页内容

开发环境的首页和发布环境的首页展示内容的形式有所不同

如开发环境中使用的是import加载第三方包，

而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现

我们可以通过插件的方式来定制首页内容，打开vue.config.js

编写代码如下：

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......           
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在public/index.html中使用插件判断是否为发布环境并定制首页内容

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    <% if(htmlWebpackPlugin.options.isProd){ %>
    ...这是生产模式引入的cdn,全部写在中间,开发模式会跳过
    <% } %>
  </head>
  .......

路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。

1.安装 @babel/plugin-syntax-dynamic-import

npm install babel-plugin-syntax-dynamic-import -D

2.在babel.config.js中声明该插件

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3.将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

javascript

import Vue from 'vue'
import Router from 'vue-router'

// import Home from './components/Home.vue'

const Home = () => import(/* webpackChunkName:"Home" */ './components/Home.vue')

图片懒加载

fs 基本使用

https://blog.csdn.net/github_38140984/article/details/83006101

项目上线

A.通过node创建服务器

在vue_shop同级创建一个文件夹vue_shop_server存放node服务器

使用终端打开vue_shop_server文件夹，输入命令 npm init -y

初始化包之后，输入命令 npm i express -S

打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中

在vue_shop_server文件夹中创建app.js文件,编写代码如下：

const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

然后再次在终端中输入 node app.js

B.开启gzip压缩--服务端

打开vue_shop_server文件夹的终端，输入命令：npm i compression -D

打开app.js,编写代码：

const express = require('express')
const compression = require('compression')
const app = express()

app.use(compression())
app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

C.配置https服务

配置https服务一般是后台进行处理，前端开发人员了解即可。

首先，需要申请SSL证书，进入https://freessl.cn官网

在后台导入证书，打开今天资料/素材，复制素材中的两个文件到vue_shop_server中

打开app.js文件，编写代码导入证书，并开启https服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })

//启动https服务
https.createServer(options,app).listen(443)

注意：因为我们使用的证书有问题，所以无法正常使用https服务

项目优化

小程序

分包处理、分包预加载

vue

gzip压缩

1 安装依赖

2 vue.config.js中的配置

3服务端开启gzip

代码分割code split

Entry Points

CommonsChunkPlugin

Dynamic Imports

使用 babel缓存

dll 打包

编译移除console

vue.config.js 配置 开发入口 打包入口

CDN +externals优化

定制首页内容

路由懒加载

图片懒加载

fs 基本使用

项目上线

A.通过node创建服务器

B.开启gzip压缩--服务端

C.配置https服务

vue.config.js 配置开发入口打包入口