zoukankan      html  css  js  c++  java
  • webpack4系列之【3. webpack4优化记录】

    背景:

    运行环境:node v11.2.0 ;webpack  4.27.1

    性能检测工具:webpack-bundle-analyzer

    优化前视图:

    stat: 12.06M (打包之前输入的文件大小)

    parsed: 5.51M(打包之后输出的文件大小)

    gzipped: 1.68M(开启gzip压缩后的文件大小)

    从analyzer视图来看,最大的chunk2.47M,较大的也有700多k,500多k,400k等,从这些大chunk入手,进行优化。

    问题:

    • 项目体积过大
    • 多个工具被打包到一个chunk,导致chunk过大,加载比较费时
    • 当前页面不需要用到的工具库同时被加载,性能变差

    优化项:

    1. cdn引入。

     externals排除第三方工具库,不打包进项目中。index.html中,script标签引入这些工具库。

    优点:减少项目体积

    问题:直接在index.html中引入,同样导致不需要的工具库被加载;如果cdn不稳定,有可能导致项目瘫痪;

    2.轻量级工具库替换

     moment.js替换为更为轻量的dayjs

    3.按需引入

    有些工具库,用到的方法,可能只是其中几个,但是却把整个库引了进来,加大项目体积。建议考虑按需引入。

    排查中,较大的库有element.ui,echarts,c3,d3。

    -- element.ui

    element.ui按需引入方案可见官网https://element.eleme.cn/#/zh-CN/component/quickstart。也可以使用插件 babel-plugin-component。

    以上两种方式都需要将使用到的组件挨个儿引入。bm-fe项目较大,且用到的组件较多,操作起来代价比较大,所以放弃element.ui按需引入。

    -- echarts

    最初方案是cdn引入,缺点见【1.cdn引入】,更改方案为:echarts.min.js以及使用的主题js文件存储为静态文件,在需要使用的页面动态插入script标签,引入echarts及对应主题

    -- 百度地图api优化

     原百度地图api直接在index.htlm中引入,导致任何页面加载时,都将引用该api,造成资源浪费,增加耗时。

    解决办法:封装promise,动态插入script标签,引入百度地图api。

    弊端:百度地图api(简称:apiKey1)的目的是要执行该api返回的脚本,这段脚本动态向html中插入一个js(简称:apiKey2),这个js才是渲染出百度地图真正依赖的脚本。

    但是动态插入script标签引入apiKey1,发现插入成功后,无法直接执行将apiKey2插入到html中(直接在script中引入时,会自动执行apiKey1返回的脚本,即:将apiKey2插入到html中)。

    原因暂不明确。

    所以最终方案是,直接动态插入script标签,将百度地图apiKey2插入到html中。

    =====各位同学知晓原因的或者有更好解决方案的,随时交流,期待中~=======

    -- c3,d3

    c3 和d3都比较大。

    首先处理的是d3,按需引入d3中需要的模块。发现被按需引入的模块单独被打包之外,整个d3又被重复打包。

    后来查看c3 package.json以及源码发现,c3把d3整个require进来了,所以,导致d3被重复打包。

    解决方案....并没有找到很合适的。

    由于引用c3的项目,已经没人用了,于是乎下掉了这个项目...

    ================以上优化,使用方法详见项目README~=============

    4. code split提取公共代码,按需加载

    -- 提取 UI框架:/[\/]node_modules[\/]element-ui[\/]/,

    -- 提取vue系列基础类库:/[\/]node_modules[\/](vu(e((-router)|x)*))/

    -- 提取常用工具:/[\/]node_modules[\/]((native-api)|(axios)|(qs)|(upload-image))/,

    -- 提取较大工具库:/[\/]node_modules[\/][c|d]3/,/[\/]node_modules[\/]quill/

    -- 提取公共代码:/[\/]src[\/]components[\/]pages/ 

    5.其他优化点

    -- mini-css-extract-plugin 提取css文件

    -- optimize-css-assets-webpack-plugin 压缩css

    -- uglifyjs-webpack-plugin 压缩js

    -- lodash-webpack-plugin lodash按需引入

    -- 等

    优化后

    stat: 10.06M (打包之前输入的文件大小)

    parsed: 4.57M(打包之后输出的文件大小)

    gzipped: 1.37M(开启gzip压缩后的文件大小)

    -- 由于项目要上传sourcemap,设置 devtool: 'hidden-source-map',hidden-source-map和source-map类似,会把源码上传,因此会对项目体积有所影响。

    一点一滴累积,总有一天你也会成为别人口中的大牛!
  • 相关阅读:
    Sudoku Solver [LeetCode]
    Populating Next Right Pointers in Each Node [LeetCode]
    Binary Tree Level Order Traversal [LeetCode]
    Clone Graph [LeetCode]
    Merge k Sorted Lists [LeetCode]
    Combinations [LeetCode]
    021 面向对象 一
    给图片加点料
    质数
    ex10 找出藏在字符串中的“密码”
  • 原文地址:https://www.cnblogs.com/fancyLee/p/11990800.html
Copyright © 2011-2022 走看看