Vue-cli 및 Webpack 패키징 릴리스 최적화 가이드

웹 프런트엔드 기술의 지속적인 발전으로 Vue.js는 매우 인기 있는 프런트엔드 프레임워크가 되었습니다. Vue.js의 Vue-cli 및 Webpack도 빌드 도구로서 필수적인 지원 도구가 되었습니다. 프로젝트를 개발할 때 일반적으로 Vue-cli를 사용하여 애플리케이션 프레임워크를 구축하고 Webpack을 사용하여 프로젝트를 패키징하고 게시합니다. 그러나 대규모 프로젝트를 패키징하고 출시하는 과정에서 프로젝트의 규모가 크기 때문에 컴파일 속도가 느리고 패키징 용량이 크며 액세스 속도가 느린 등의 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 이 기사에서는 소개하겠습니다. Vue-cli 및 Webpack 패키징은 개발자가 대규모 프로젝트의 릴리스 효과를 더 잘 최적화하는 데 도움이 되는 릴리스 최적화 가이드입니다.

1. Vue-cli 프로젝트 최적화

1. 필요에 따라 타사 구성요소 도입

개발 과정에서는 일반적으로 jQuery, Bootstrap, Echarts 등과 같은 타사 라이브러리를 사용하지만 전체 라이브러리를 도입합니다. 포장량이 과대해질 수 있습니다. 크고 느린 접근 문제가 있습니다. 따라서 babel-plugin-comComponent 플러그인을 사용하여 필요에 따라 도입할 수 있습니다. babel-plugin-component 插件来进行按需引入。

在 babel.config.js 中设置：

plugins: [
  ['component', {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }]
]

这里以 Element-ui 为例，使用插件按需引入库，可以大大减少打包体积。

2. 配置 Webpack 属性

我们可以通过修改 vue.config.js 文件来修改 Webpack 的配置属性。以下是一些常用的 Webpack 属性的配置方法：

// 修改输出文件名格式
output: {
  filename: '[name].[hash].js'
}

// 修改 publicPath
publicPath: process.env.NODE_ENV === 'production' ?
  '/production-sub-path/' : '/'

// 压缩代码
uglifyOptions: {
  compress: {
    warnings: false,
    drop_console: true,
    drop_debugger: true,
    dead_code: true
  }
}

// 配置 externals，将大型的第三方库从打包代码中剥离
externals: {
  'vue': 'Vue',
  'jquery': 'jQuery',
  'bootstrap': 'Bootstrap',
  'echarts': 'echarts',
  'moment': 'moment'
}

// 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小
configureWebpack: {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

二、Webpack 优化

1. 使用多线程构建

使用多线程构建可以大大提高打包速度，可以使用 happypack 插件来实现多线程构建。使用该插件需要先安装 happypack：

npm install happypack -D

接下来将原来的配置文件:

module: {
  rules: [
    {
      test: /.js$/,
      loader: 'babel-loader'
    },
    ...
  ]
}

修改为：

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      loader: 'happypack/loader?id=happyBabel'
    },
    ...
  ]
},
plugins: [
  new HappyPack({
    id: 'happyBabel',
    loaders: ['babel-loader'],
    threadPool: happyThreadPool,
    verbose: true
  })
]

这里使用 happypack 插件来启用多线程构建。

2. 使用 DllPlugin 和 DllReferencePlugin 技术

DllPlugin 和 DllReferencePlugin 技术主要是将一些不经常变动的库单独打包成一个 lib 文件，这样在每次打包时就不用再去打包这些库文件，只需要在之后使用 DllReferencePlugin 进行引入即可。

使用方法：

1. 先配置 DllPlugin：

const path = require('path');
const webpack = require('webpack');
const dllPath = 'static/dll';

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库
  },
  output: {
    path: path.join(__dirname, `../${dllPath}`),
    filename: '[name].dll.js',
    library: '[name]_[hash]'  // 暴露全局变量，避免前后两次打包，库名字变更
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, `../${dllPath}`, 'manifest.json')
    })
  ]
};

2. 执行打包：

cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules

3. 在 index.html 中使用 <script>
babel.config.js에 설정:

<script src="<%= BASE_URL %>static/dll/vendor.dll.js"></script>

Element-ui를 예로 들면 플러그인을 사용하여 필요에 따라 라이브러리를 도입하면 패키징 볼륨을 크게 줄일 수 있습니다. .
4. Webpack 속성 구성
   vue.config.js 파일을 수정하여 Webpack의 구성 속성을 수정할 수 있습니다. 다음은 일반적으로 사용되는 Webpack 속성 구성 방법입니다.

   const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
   const path = require('path');
   
   plugins: [
     new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: require(path.join(__dirname, './static/dll/manifest.json'))
     }),
     new AddAssetHtmlWebpackPlugin({
       filepath: path.resolve(__dirname, './static/dll/*.dll.js')
     })
   ]

   2. Webpack 최적화
   🎜멀티 스레드 빌드 사용🎜🎜🎜멀티 스레드 빌드를 사용하면 패키징 속도를 크게 향상시킬 수 있습니다. happypack 멀티스레드 빌드를 구현하는 플러그인입니다. 이 플러그인을 사용하려면 먼저 <code>happypack을 설치해야 합니다: 🎜rrreee🎜 그런 다음 원래 구성 파일을 수정합니다: 🎜rrreee🎜 다음으로: 🎜rrreee🎜여기에서 happypack를 사용하세요. > 멀티스레딩 구성을 활성화하는 플러그인입니다. 🎜
   🎜DllPlugin 및 DllReferencePlugin 기술 사용🎜🎜🎜DllPlugin 및 DllReferencePlugin 기술은 자주 변경되지 않는 일부 라이브러리를 주로 lib 파일로 패키징하므로 ​​매번 라이브러리 파일을 패키징할 필요가 없습니다. 나중에 DllReferencePlugin을 사용하여 도입하면 됩니다. 🎜🎜사용법: 🎜🎜🎜먼저 DllPlugin 구성: 🎜🎜rrreee
   🎜패키징 실행: 🎜🎜rrreee
   🎜index.html에서 사용 생성된 라이브러리 파일을 소개하는 <script>: 🎜🎜rrreee🎜🎜Configure DllReferencePlugin: 🎜🎜rrreee🎜이 플러그인은 생성된 Dll 파일을 페이지에 자동으로 소개할 수 있습니다. 🎜🎜요약: 🎜🎜위의 방법을 통해 Vue-cli 및 Webpack을 최적화하여 프로젝트 패키징을 더 작고 빠르게 만들 수 있습니다. 물론 위의 방법이 만능은 아니며 구체적인 최적화 방법은 프로젝트의 구체적인 조건에 따라 조정될 필요가 있습니다. 이 글이 프로젝트를 패키징하고 퍼블리싱할 때 모든 사람에게 도움이 되기를 바랍니다. 🎜

   위 내용은 Vue-cli 및 Webpack 패키징 릴리스 최적화 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!