webpack打包优化进阶版

最新推荐文章于 2023-06-18 18:02:28 发布

L_squan

最新推荐文章于 2023-06-18 18:02:28 发布

阅读量479

点赞数

本文链接：https://blog.csdn.net/L_squan/article/details/118388933

版权

本文详细介绍了Webpack打包的优化技巧，包括设置静态资源路径防止白屏、关闭sourceMap以减小内存、添加进度条、移除console信息、自定义webpack配置、利用CDN优化第三方包加载、定制不同环境的首页内容、实现路由懒加载，以及项目上线时如何创建服务器并开启gzip压缩。通过这些步骤，能显著提升项目构建和运行效率。

摘要由CSDN通过智能技术生成

首先就是要在根目录下创建vue.config.js
1、设置静态资源路径否则打包后会白屏

module.exports = {
   
  publicPath: "./", 
  }

2、关闭生产环境下的sourceMap映射文件能减少dist文件的3/4内存
sourceMap 但是有一点关闭后打包的报错不能提示准确位置

productionSourceMap: false,

3、添加进度条
需要安装nprogress
在main.js下可以这样操作

// 导入NProgress, 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

 axios.interceptors.request.use(config => {
   
 // 在request 拦截器中, 展示进度条 NProgress.start()
  NProgress.start()
  // console.log(config)
  // 为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

axios.interceptors.response.use(config => {
   
// response 拦截器中,  隐藏进度条NProgress.done()
  NProgress.done()
  return config
})

4、执行build
这里我们可以把所有的 console信息移除需要安装一个插件
babel-plugin-transform-remove-console
然后打开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
  ]
}

5、修改webpack的默认设置
需要通过vue.config.js来配置

chainWebpack可以通过链式编程的形式修改webpack配置

module.exports = {
   
  chainWebpack:config=>{
   
      //发布模式
      config.when(process.env.NODE_ENV === 'production',config=>{
   
          //entry找到默认的打包入口，调用clear则是删除默认的打包入口
          //add添加新的打包入口
          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')
      })
  }
}

6、CDN优化（加载外部CDN）
默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大
我们可以externals来排除第三方包的加载

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

      config.set('externals', {
   
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts

最低0.47元/天解锁文章