• 记一次 webpack 优化


    day 0 【项目概况】(2020-07-16)

    项目打包实在太慢了,打算长期优化一下。目前的打包时间(npm run build)约 60s(启动开发环境 npm run dev 也需要将近 50s)

    先介绍下项目,是个很普通的 vue 单页应用,年代比较久远,用的是 vue-cli2 脚手架,做了部分修改(根据备注是当时不修改打包报错),并没有刻意配置其他的优化项。看了下打包结果,100 多个文件(不包括 sourcemap 文件),项目的路由比较多,而且基本都是路由懒加载,所以打包出来的文件较多

    其中有几个文件比较大:

    vender.js 和 app.js 看起来是公共文件,app.css 是项目唯一的 css。而另外几个,猜测是路由懒加载打包的文件,但是为啥会这么大?留待分析

    此次优化,主要是优化 构建时间,同时也会对项目进行代码上的优化

    day 1 【项目依赖项整理】(2020-07-17)

    项目打包用的是 webpack3,对于优化的第一个想法是升级到 webpack4(webpack5 beta 已经好久了 ...),不管有没有用,用新不用旧。升级 webpack 意味着不少 loader 和插件都得同步升级,于是我看了下 package.json 文件,发现非常乱,不少没在项目中的依赖也出现在文件中,而且开发依赖和生产依赖混着来了

    经过整理,删除了以下依赖项:

    • awe-dnd(未使用,看起来是在 vue 中做拖拽的,两年没更新了,周下载也就 1500)
    • browser-sync(之前用了 gulp 脚本,现在未使用,同时删除了 gulpfile.js)
    • crypto(未使用)
    • font-awesome(未使用)
    • js-yaml(未使用)
    • gulp / gulp-autoprefixer / gulp-load-plugins / gulp-notify / gulp-plumber / gulp-sass (没必要再使用 gulp,而且实际上也没在使用了)
    • vue-easytable(未使用)
    • videojs-contrib-hls(未使用)
    • v-distpicker(不再使用)
    • vue-quill-editor(未使用)
    • vue-summernote(项目中使用的富文本编辑器,但是是整个文件夹复制过来的,所以没有使用 node_modules 里的)

    生产依赖中有几个存疑项:

    • mint-ui (并没有使用,好像是打入的第三方包使用了,那这个依赖不应该配置在第三方包中吗?)
    • ali-oss(啥玩意,到底有么有用呢)

    几个待优化项:(都是从代码优化角度,对于构建速度也有提升,但是应该提升不大)

    • bootstrap
    • jquery
    • mint-ui
    • moment
    • summernote / codemirror
    • ali-oss
    • merge(干嘛的?)
    • vue-resource
  • 相关阅读:
    SQL Server数据库中批量替换数据的方法
    js 鼠标移上去弹出层效果
    50个jQuery代码段帮你成为更好的JavaScript开发者
    MSN、腾讯QQ、SKYPE、阿里旺旺网页在线客服源代码
    正则表达式基础知识
    常用邮箱POP3和SMTP服务器汇总
    CS5序列号
    如何使用Oracle SQLDeveloper 中连接MS SQLServer和MySQL数据库
    Silverlight与后台数据库的三种技术实现基本的互操作(转)
    ADO 与ADO.NET
  • 原文地址:https://www.cnblogs.com/lessfish/p/13323822.html
Copyright © 2020-2023  润新知