本溪网站开发公司电话,国内优秀企业网站设计,中国网站开发,网站如何进行建设目录 背景先解决内存溢出问题 让项目能够打包打包优化公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入项目中使用 图片等 静态资源 全部走cdn使用thread-loader 开启多线程打包 后序 背景
其他项目组有个项目迭代了3年#xff0c;突然有一天 vuecli-4 webpack打包… 目录 背景先解决内存溢出问题 让项目能够打包打包优化公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入项目中使用 图片等 静态资源 全部走cdn使用thread-loader 开启多线程打包 后序 背景
其他项目组有个项目迭代了3年突然有一天 vuecli-4 webpack打包出现了 内存溢出于是紧急协助处理了下。
先解决内存溢出问题 让项目能够打包
将打包内存 扩大到4G
// package.json
//将内存 扩大到 4G 。scripts: {dev: NODE_OPTIONS\--max-old-space-size4096\ vue-cli-service serve --mode dev,build:uat: NODE_OPTIONS\--max-old-space-size4096\ vue-cli-service build --mode uat,build:pre: NODE_OPTIONS\--max-old-space-size4096\ vue-cli-service build --mode pre,build:prd: NODE_OPTIONS\--max-old-space-size4096\ vue-cli-service build --mode prd,eslint: eslint --ext .js,.vue src eslint \src/**/*.{js,vue}\ --fix,lint: vue-cli-service lint --fix,prepare: husky install}
node 在Linux服务器 单服务v8运行内存 默认最大为1.4G
打包优化
公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入
// vue.config.jsconfigureWebpack: (config) {......config.externals {echarts: echarts,vue: Vue,axios: axios,vuex: Vuex,vue-router : VueRouter}
}
// index.html
!-- 性能优化这几个包如果通过webpack打包出来体积太大了影响首屏加载时间--
script srchttps://xxxx.com/public/wlc/qywx/utils/echarts.min.js/script
script srchttps://xxxx.com/public/wlc/qywx/utils/vue.min.js /script
script srchttps://xxxx.com/public/wlc/qywx/utils/axios.min.js /script
script srchttps://xxxx.com/public/wlc/qywx/utils/vuex.min.js /script
script srchttps://xxxx.com/public/wlc/qywx/utils/vue-router.min.js /script项目中使用 图片等 静态资源 全部走cdn
图片引用直接用cdn ,不走本地打包
使用thread-loader 开启多线程打包
thread-loader 与 vue-loader 和 babel-loader 结合使用以加速构建过程
npm i -D thread-loader// vue.config.jschainWebpack(config) {
...
...// 配置 thread-loader 与 vue-loader 结合config.module.rule(vue).use(thread-loader).loader(thread-loader).options({// 为 thread-loader 设置参数如线程数workers: 3,// 其他可能需要的选项如缓存// workerParallelJobs: 50,// poolTimeout: 2000,}).end().use(vue-loader).loader(vue-loader).end()// 配置 thread-loader 与 babel-loader 结合config.module.rule(js).exclude.add(/node_modules/).end().use(thread-loader).loader(thread-loader).options({// 保持与 vue-loader 中 thread-loader 的选项一致workers: 3,// 其他可能需要的选项// ...}).end().use(babel-loader).loader(babel-loader).end()}
后序
项目重构成 vue3 多入口页面。多入口对比单入口 有个优势就是每个入口的打包 内存环境都是独立 重新计算的。
