vue打包优化，webpack的8大配置方案

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

vue-cli 生成的项目通常集成Webpack ，在打包的时候，需要webpack来做一些事情。这里我们希望它可以压缩代码体积，提高运行效率。

文章目录

• • （1）代码压缩：
  • （2）图片压缩：
  • （3）Tree-Shaking删除未使用代码：
  • （4）代码分割：
  • （5）懒加载：
  • （6）缓存策略：
  • （7）去除未使用的代码：
  • （8）按需加载字体和其他资源：

    

    （1）代码压缩：

    使用 Webpack 的压缩插件，如 UglifyJSPlugin 或 TerserPlugin，来压缩和优化 JavaScript 代码。示例代码：

    const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin’);

    module.exports = {

    plugins: [

    new UglifyJSPlugin()

    ]

    };

    这将压缩和混淆 JavaScript 代码，减小文件大小。

    （2）图片压缩：

    对于图片资源，可以使用图像压缩工具或库，如 imagemin 或 svgo，在 Webpack 构建过程中自动压缩图片。示例代码（使用 imagemin-webpack-plugin）：

    const ImageminPlugin = require(‘imagemin-webpack-plugin’).default;

    module.exports = {

    plugins: [

    new ImageminPlugin({

    pngquant: {

    quality: ‘65-80’

    }

    })

    ]

    };

    根据需要配置图片压缩的参数，如质量等。

    （3）Tree-Shaking删除未使用代码：

    启用 Tree-Shaking，删除未使用的代码和依赖。确保在模块导入时使用具体的导出名称，而不是通配符或默认导入。示例代码：

    import { componentA } from ‘./componentA’;

    而不是：

    import * as componentA from ‘./componentA’;

    （4）代码分割：

    将代码分割成多个块，并按需加载，只加载当前页面需要的代码。使用 CommonsChunkPlugin 或 SplitChunksPlugin 来实现。示例代码（使用 CommonsChunkPlugin）：

    const CommonsChunkPlugin = require(‘webpack/lib/ CommonsChunkPlugin’);

    module.exports = {

    plugins: [

    new CommonsChunkPlugin({

    name: ‘vendors’,

    minChunks: Infinity

    })

    ]

    };

    将常用的库或第三方模块提取到一个单独的vendors 文件中。

    （5）懒加载：

    实现组件懒加载，只有在需要时才加载对应的组件。使用 Vue 的异步组件或 Webpack 的动态导入。示例代码（使用 Vue 的异步组件）：

       
       methods: {
         loadComponent() {
           return () => import('./componentB.vue');
         }
       }
    

    在需要时动态加载组件 B。

    （6）缓存策略：

    利用 Webpack 的缓存机制，避免重复编译相同的代码。配置合适的缓存策略，如设置 cache-loader 或 hard-source-webpack-plugin。示例代码（使用 cache-loader）：

    module: {

    rules: [

    {

    test: /.js$/,

    use: ‘cache-loader’,

    loader: ‘babel-loader’

    }

    ]

    }

    使用 cache-loader 来缓存 Babel 编译的结果。

    （7）去除未使用的代码：

    使用 Webpack 的分析工具，如 webpack-bundle-analyzer，来分析包的内容，找出未使用的代码并进行清理。安装和运行 webpack-bundle-analyzer，查看构建结果的分析报告。

    （8）按需加载字体和其他资源：

    使用字体加载库，如 fontface-loader，或其他资源的按需加载库，避免一次性加载所有资源。

    这些方案可以结合使用，根据项目的具体需求和情况进行调整。通过合理配置 Webpack，可以有效减小 Vue 项目打包文件的大小，提高应用的性能和加载速度。记得根据实际情况进行测试和优化，并根据项目的特定需求选择合适的方案。