优化webpack4配置,加快页面访问时间

一、问题

  在测试环境打开项目代码只需要1s左右,但在正式环境则要12s左右才能打开页面,这么慢才响应真的让人很恼火,虽然网络肯定有很大原因,但前端代码加载也是着实要优化才行。

  我看了一下浏览器开发者工具,发现前端把整个项目的代码文件都加载了,我也是醉了(因为这个项目我只是接手同事的),最大问题就是在这里了。

  

  代码优化固然很重要,但耗时很久,只能优化webpack打包代码了。

二、解决过程

  在这个项目里,我没看到webpack的配置文件,只能通过改 vue.config.js 文件,详细的参数可以在网上找。

1、删除map文件

  这个虽然对访问页面没有很大的效果,查了一下,打包的时候有这个文件是存在安全隐患的,然后就果然设置参数删除掉。

productionSourceMap: false,  // 不生成map文件,减轻文件大小

  参数是在 vue.config.js 文件设置的,打包构建后,构建的文件夹压缩包大小减少了一半

2、异步加载组件

  我看到同事很多组件都是用import同步加载的,这样感觉也会拖延时间,所以统一改成了异步加载组件

 // 同步加载
import Information from '@/components/rfmModel/basicInformation.vue';

 // 异步加载
const Information= () => import('@/components/rfmModel/basicInformation.vue');

3、开启gzip压缩

  打包的时候压缩可以减少体积。

(1)安装

npm install compression-webpack-plugin -D

(2)在vue.config.js中有个 configureWebpack 参数,在 configureWebpack 返回的对象中,对象属性 plugins 数组 添加插件

const CompressionWebpackPlugin = require("compression-webpack-plugin");
 1 configureWebpack: (config) => { 
 2     return {
 3         plugins: [
 4             new CompressionWebpackPlugin({
 5                 test: /\.js$|\.html$|\.css/, //匹配文件名
 6                 threshold: 9040,  //对超过9040KB的文件进行压缩
 7                 // deleteOriginalAssets: false //是否删除源文件
 8             }),
 9         ],
10     }
11 },

4、按需引入

  lodash-webpack-plugin与babel-plugin-lodash结合使用,但配置完这个,我上面的问题还是没有解决。

(1)安装

npm i -S lodash-webpack-plugin babel-plugin-lodash

(2)配置

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
configureWebpack: (config) => { 
        return {
            plugins: [
                new LodashModuleReplacementPlugin(),
            ],
       }
}

至于babel-plugin-lodash,我看到项目文档导出来的webpack配置是已经配好了,查了一下,有两种配置方法:

①.babelrc中配置 “plugins”: [“transform-runtime”,“transform-vue-jsx”,“lodash”]

②在rules配置

1 {
2       test: /\.(js|jsx)$/,
3       loader: 'babel-loader',
4       exclude: /node_modules/,
5       include: [resolve('src'), resolve('test')]
6       options: {plugins: ['lodash']}
7 }
8         

5、切割代码,合并共用模块

  webpack4已经废弃了CommonsChunksplugin,改用了splitChunks。这个我也不是很了解,具体参数可查看官网。

 

 1 configureWebpack: () => {
 2     return {
 3       plugins: [
 4         new LodashModuleReplacementPlugin()
 5       ],
 6       optimization: {
 7         splitChunks: {
 8           minSize: 2000, // 提取出的chunk的最小大小
 9           maxSize: 1000000,// 提取出的chunk的最大大小,告诉 webpack 尝试将大于 maxSize 个字节的 chunk 分割成较小的部分
10           cacheGroups: {
11             common: {
12               name: 'commons',
13               chunks: 'initial',
14               minChunks: 2, // 拆分前必须共享模块的最小块数
15               priority: -20
16             },
17             vendor: {
18               priority: -10, //添加权重
19               test: /[\\/]node_modules[\\/]/, //把这个目录下符合下面几个条件的库抽离出来
20               name: "vendor",
21               chunks: 'initial',
22             },
23           },
24           chunks:"all", 
25         }
26       },
27     };
28   },

 

6、html-webpack-plugin

  这个是解决我上面加载全部代码文件的问题,查了一下,它的主要作用:

①为html文件中引入的外部资源如scriptlink动态添加每次compile后的hash,防止引用缓存的外部文件问题

②可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置Nhtml-webpack-plugin可以生成N个页面入口

  似乎与我上面的问题一点关系也没有,但它解决了我的苦恼,天啊,这是为什么啊!!!

(1)安装

npm i -S html-webpack-plugin

(2)配置

let HtmlWebpackPlugin = require('html-webpack-plugin');
 1 configureWebpack: (config) => {  
 2     return {
 3         plugins: [
 4             new HtmlWebpackPlugin({
 5                 template: './public/index.html',
 6                 hash: true, // 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
 7                 inject: true // 向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同
 8             })
 9         ],
10     }
11 },

之前都没试过亲自配置webpack,花了好长时间,也踩了好多坑,继续努力。

 

posted on 2020-11-18 15:17  大黑ylx  阅读(798)  评论(1编辑  收藏  举报