webpack打包优化

最新推荐文章于 2024-08-08 22:11:57 发布

你难遇见、

最新推荐文章于 2024-08-08 22:11:57 发布

阅读量372

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_51288146/article/details/117635950

版权

本文介绍了webpack打包的作用，如提高打包速度、减小项目体积和提高首屏加载速度。重点讲解了在项目开始时如何设置proxy跨域和配置alias别名，以及在打包前必须进行的步骤，包括修改静态资源路径、关闭SourceMap、使用CDN加速优化和删除console.log及注释。通过这些优化，可以提升用户体验并减少项目体积。

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

一、webpack打包的作用

提高打包速度
减小项目体积、提高首屏加载速度
提高用户体验

二、在根目录下创建一个`vue.config.js`文件，名字不可以更改，下面的代码都在这个js文件里面实现

三、项目开始时的准备

1、设置proxy跨域


module.exports = {
   
  devServer: {
   
   open: true, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新
 
   overlay: {
   
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
   
      //配置跨域
      '/api': {
   
        target: 'https://www.test.com', // 线上后端地址
        // ws: true, // 是否启用websockets
        changOrigin: true, // 允许跨域，开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
   
          '^/api': '/'
        }
      }
    }
  }
}


// proxy是代理的意思
// 代理跨域就是在欺骗浏览器 让浏览器认为你访问的还是 同源的localhost：8080 ，但是用代理把地址代理到了需要跨域的地址去了
 
// 首先第一步把vue.config.js放在项目的根目录下
// 然后重启项目
// 在这里代理的关键字是/api，也就是在之后请求的时候 在路径前拼接/api
// 如果用http 必须要把baseurl删除

2、配置alias别名

在vue项目开发中，组件化开发是我们不得不经常引用组件或插件，一些路径被频繁使用，为了简化代码，方便开发，我们将这些频繁使用的路径定义成简单的名字。


//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
   
  chainWebpack: