webpack--压缩，代码的拆分，tree shinking

news2024/12/23 8:19:38

Terser

对代码进行压缩、丑化

const TerserPlugin = require("terser-webpack-plugin");
 optimization: {
minimize: true, //在开发环境下启用 CSS 优化
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,// 将函数中使用的argumens[index]转换成对应的形参名称
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
    ],
}

compress中的属性：
arrows: class 或者object中的函数，转换成箭头函数
arguments:将函数中使用的argumens[index]转换成对应的形参名称
dead_code:移除不可达的代码
mangle中的属性:
toplevel:默认是false,顶层作用域中的变量名称进行丑化
keep_classnames 默认是false,是否保持依赖的类的名称
keep_fnames:默认是false,是否保持原来的函数名称
在这里插入图片描述

css压缩

npm i css-minimizer-webpack-plugin -D

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 optimization: {
   new CssMinimizerPlugin({
        parallel: true,
      }),
}

代码拆分

脚本命令运行时可以携带参数

  "scripts": {
    "build": "npx webpack --config ./config/com.config.js --env production",
    "server": "npx webpack server --config ./config/com.config.js --env development",
    "ts-check": "tsc  --noEmit",
    "tc-check-watch": "tec --noEmit --watch"
  },

module.exports可以导出一个函数,这个函数可以接受环境变量env

const commonConfig ={}
// webpack允许导出一个函数
module.exports = function (env) {
  console.log(env);
  return commonConfig;
};

在这里插入图片描述
安装merge
npm i webpack-merge -D
com.config.js存放开发和生产环境都会用到的配置

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { merge } = require("webpack-merge");
const devConfig = require("./dev.config");
const prodConfig = require("./prod.config");
const config = function (isProduct) {
  return {
    entry: {
      main: {
        import: "./src/main.js",
        dependOn: "shared",
      },
      index: {
        import: "./src/index.js",
        dependOn: "shared",
      },
      shared: "dayjs",
    },
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../build"),
      clean: true,
      chunkFilename: "[name]-chunk.js", //对分包的文件命名
    },
    resolve: {
      extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],
      alias: {
        "@": path.resolve(__dirname, "../src"),
      },
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            //"style-loader", 开发
            // MiniCssExtractPlugin.loader,//生产
            "css-loader",
            "postcss-loader",
          ],
        },
        {
          test: /\.scss$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024,
            },
          },
          generator: {
            filename: "img/[hash][ext]",
          },
        },
        {
          test: /\.jsx$/,
          use: "babel-loader",
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/, //排除/node_modules/ 下的文件
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
      ],
    },
    plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
    ],
  };
};

module.exports = function (env) {
  const isProduct = env.production;
  let mergeConfig = isProduct ? prodConfig : devConfig;

  return merge(config(isProduct), mergeConfig);
};

dev.config.js 开发环境的配置

const path = require("path");
module.exports = {
  mode: "development",
  devServer: {
    hot: true,
    open: true,
    port: "7070",
    host: "127.0.0.1",
    compress: true,
    static: [
      //静态目录
      {
        directory: path.join(__dirname, "public"),
      },
      {
        directory: path.join(__dirname, "content"),
      },
    ],
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
  performance: {
    //配置如何展示性能提示  例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
    maxEntrypointSize: 50000000,
    maxAssetSize: 30000000,
  },
};

prod.config.js 生产环境的配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  mode: "production",
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",
    }),
  ],

  optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

usedExports ，对js进行tree shinking

对代码中没有用到的代码做标记,配合Terser使用可以删除代码中没有用到的代码。

 optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },

对css进行tree shaking

npm i purgecss-webpack-plugin -D
npm i glob -D Node没有内置

没有用到的css文件不会被打包

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const path = require("path");
const glob = require("glob");
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa",], //白名单
         // deep: [/^safelisted-deep-/],
         // greedy: [/^safelisted-greedy/],
        };
      },
    }),
  ],

在这里插入图片描述
PurgeCSSPlugin可以设置白名单 safelist，设置后无论使用还是没有使用都会被打包

 new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa",], //白名单
         // deep: [/^safelisted-deep-/],
         // greedy: [/^safelisted-greedy/],
        };
      },
    }),

在这里插入图片描述

import(“…/css/index.css”)：这种方式使用了动态import，在运行时会动态地加载模块。

import"…/css/index.css"：这种方式是标准的静态import，在编译时会静态地确定模块的依赖关系。
在这里插入图片描述
MiniCssExtractPlugin的chunkFilename可以给异步导入的包命名

 new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css",//异步导入的分包的css的名字
      ignoreOrder: true, // 忽略 CSS 中的顺序问题
    }),

在这里插入图片描述

Scope Hoisting

对作用域进行提升，使打包后的代码更小，运行更快。
Scope Hoisting可以将函数合并到一个模块中来运行。

生产环境下默认会开启，开发环境下需要手动打开。

 plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],

HTTP压缩

HTTP压缩是一种在传输过程中对HTTP,请求和响应数据进行压缩的技术，可以显著减小数据传输量，从而加快网页的加载速度，减少网络传输所消耗的带宽。

常用的HTTP压缩算法包括Gzip和Deflate。这些算法会压缩文本、脚本、样式表和其他支持压缩的文件格式，使它们在服务器端进行压缩后再在客户端进行解压缩，以加快数据传输速度。

HTTP压缩的流程:

  1. http的数据在服务器发送前就已经被压缩了(可以在webpack中完成)
  2. 兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式。
    在这里插入图片描述
  3. 服务器在浏览器支持的压缩格式下，直接返回对应压缩后的文件，并在响应头中告知浏览器。
    在这里插入图片描述

npm install compression-webpack-plugin -D

const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
  plugins: [

    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin(),
  ],

部分属性


  new CompressionPlugin({
     include:"",
     exclude:"",
     threshold:0,//大于多少kb就压缩
     minRatio:0.8，//代码压缩的最小比例
     test:/\.(css|js)$/i,
  }),

html压缩

HtmlWebpackPlugin 除了可以生成html模板外，还有其他配置可以对html进行压缩。

 plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify:isProduct?{
          removeComments:true, //移除注释
          removeEmptyAttributes:true,//移除空属性，例如class定一个,但是没有值。
          removeRedundantAttributes:true,//移除默认属性，例如input的type 默认是text,设置后会移除type
          collapseWhitespace:true,//折叠空白字符
          minifyCSS:true ,//压缩内联样式的css
          minifyJS:{  //压缩script标签中的js
            mmangle:{
              topLevel:true
            }
          }
        }:false
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
    ],

打包时间的分析

npm i speed-measure-webpack-plugin -D

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smap = new SpeedMeasurePlugin();
smap.wrap(config)

打包后的文件分析

npm i webpack-bundle-analyzer -D

const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer");
 plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify: isProduct
          ? {
              removeComments: true, //移除注释
              removeEmptyAttributes: true, //移除空属性，例如class定一个,但是没有值。
              removeRedundantAttributes: true, //移除默认属性，例如input的type 默认是text,设置后会移除type
              collapseWhitespace: true, //折叠空白字符
              minifyCSS: true, //压缩内联样式的css
              minifyJS: {
                //压缩script标签中的js
                mmangle: {
                  topLevel: true,
                },
              },
            }
          : false,
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
      new BundleAnalyzerPlugin(),
    ],

运行打包命令后会打开一个网页：
在这里插入图片描述

全部配置

com.config.js:

const path = require("path");
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { merge } = require("webpack-merge");
const devConfig = require("./dev.config");
const prodConfig = require("./prod.config");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer");
const smap = new SpeedMeasurePlugin();
const config = function (isProduct) {
  return {
    entry: {
      main: {
        import: "./src/main.js",
        dependOn: "shared",
      },
      index: {
        import: "./src/index.js",
        dependOn: "shared",
      },
      shared: "dayjs",
    },
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../build"),
      clean: true,
      chunkFilename: "[name]-chunk.js", //对分包的文件命名
    },
    resolve: {
      extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],
      alias: {
        "@": path.resolve(__dirname, "../src"),
      },
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            //"style-loader", 开发
            // MiniCssExtractPlugin.loader,//生产
            "css-loader",
            "postcss-loader",
          ],
        },
        {
          test: /\.scss$/,
          use: [
            isProduct ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          type: "asset",
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024,
            },
          },
          generator: {
            filename: "img/[hash][ext]",
          },
        },
        {
          test: /\.jsx$/,
          use: "babel-loader",
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/, //排除/node_modules/ 下的文件
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.ts$/,
          use: "babel-loader",
        },
      ],
    },
    plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: "webpack项目",
        template: "./src/index.html",
        minify: isProduct
          ? {
              removeComments: true, //移除注释
              removeEmptyAttributes: true, //移除空属性，例如class定一个,但是没有值。
              removeRedundantAttributes: true, //移除默认属性，例如input的type 默认是text,设置后会移除type
              collapseWhitespace: true, //折叠空白字符
              minifyCSS: true, //压缩内联样式的css
              minifyJS: {
                //压缩script标签中的js
                mmangle: {
                  topLevel: true,
                },
              },
            }
          : false,
      }),
      new DefinePlugin({
        BASE_URL: "'./public'",
      }),
      new BundleAnalyzerPlugin(),
    ],
  };
};

module.exports = function (env) {
  const isProduct = env.production;
  let mergeConfig = isProduct ? prodConfig : devConfig;
  const myConfig = merge(config(isProduct), mergeConfig);
  return myConfig;
};

dev.config.js:

const path = require("path");

module.exports = {
  mode: "development",

  devServer: {
    hot: true,
    open: true,
    port: "7070",
    host: "127.0.0.1",
    compress: true,
    static: [
      //静态目录
      {
        directory: path.join(__dirname, "public"),
      },
      {
        directory: path.join(__dirname, "content"),
      },
    ],
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
  performance: {
    //配置如何展示性能提示  例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
    maxEntrypointSize: 50000000,
    maxAssetSize: 30000000,
  },
};

prod.config.js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
module.exports = {
  mode: "production",
  plugins: [
    // new CleanWebpackPlugin(),
    new CopyPlugin({
      //把public下的文件拷贝到build下的public下
      patterns: [{ from: "public", to: "public" }],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name]_chunk.css", //异步导入的分包的css的名字
      ignoreOrder: true, // 忽略 CSS 中的顺序问题
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, {
        nodir: true,
      }), //src/xx/x  nodir:true,不是查找文件夹，而是文件
      safelist: function () {
        return {
          standard: ["aa"], //白名单
          // deep: [/^safelisted-deep-/],
          // greedy: [/^safelisted-greedy/],
        };
      },
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CompressionPlugin({}),
  ],

  optimization: {
    chunkIds: "deterministic", //选择模块 id 时需要使用哪种算法
    usedExports: true, //去决定每个模块的到处内容是否被使用 ,生产环境下默认开启，与minimizer配合使用可以去除定义后没有使用的代码
    runtimeChunk: {
      name: "runtime", //运行时代码提取到单独的文件中的方式。这有助于避免在每个模块更改时导致运行时代码的变化，从而减少主要包的大小并提高缓存利用率。
    },
    //分包
    splitChunks: {
      chunks: "all",
      //
      maxSize: 20000,
      //将包拆成不小于minSize的包，如果打不到minSize，那么这个包就不会拆分（会被合并到其他包中）
      minSize: 10000,
      cacheGroups: {
        venders: {
          //匹配/node_modules/下的包   [\\/]  /node_modules和\node_modules 为了处理不同系统的问题
          // \\  第一个\是为了转意，有些字符有特殊含义
          test: /[\\/]node_modules[\\/]/,
          filename: "[id]_[contenthash:6]_vender.js",
        },
        foo: {
          test: /utils/,
          filename: "[id]_[contenthahs:6]_utils.js",
        },
      },
    },
    minimize: true, //在开发环境下启用 CSS 优化
    //代码丑化设置
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            arguments: true,
            unused: false,
          },
          mangle: true,
          keep_fnames: true,
        },
      }),
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

package.json:


  "scripts": {
    "build": "npx webpack --config ./config/com.config.js --env production",
    "server": "npx webpack server --config ./config/com.config.js --env development",
    "ts-check": "tsc  --noEmit",
    "tc-check-watch": "tec --noEmit --watch",
  },

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1812334.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CAPL如何发送一条SYN报文

CAPL如何发送一条SYN报文

在TCP协议中，发起连接的Client端首先会发送一条SYN报文，用来发起TCP连接请求。这条SYN报文的本质是TCP报文，只不过flags字段中SYN位置为1。 且SYN的序列号是随机的，所以可以用一个随机函数来生成随机数。而ack确认号是0。 TCP报文和UDP报文一样，需要设置源和目标端口号，…
阅读更多...
最新小红薯引流无限曝光机，轻松高效精准曝光引流【引流软件+使用教程】

最新小红薯引流无限曝光机，轻松高效精准曝光引流【引流软件+使用教程】

在现代数字营销的海洋中，精准引流已成为商家及创业者追求的圣杯。一种无需采集ID的新策略突破了传统营销的局限，提供了一条高效且安全的道路。这种方法旨在通过有针对性的关键词触达潜在的兴趣群体，实现品牌与用户之间的高效对接。 以关键词…
阅读更多...
【CW32F030CxTx StartKit开发板】构建开发环境，测试LED和UART例程

【CW32F030CxTx StartKit开发板】构建开发环境，测试LED和UART例程

目录 1、开发环境的构建 2、硬件连线 3. 例程测试 3.1 LED示例 3.2 UART printf示例 本文首发于21ic：https://bbs.21ic.com/forum.php?modviewthread&tid3382698&page1#pid14103102 感谢21ic和武汉芯源提供的测试机会。 此次测试的是CW32F030CxTx S…
阅读更多...
新手grub 配置介绍

新手grub 配置介绍

最近因为工作需要接触了grub，学到了一些相关知识，所以在这里写篇博客记录一下，有不对的部分欢迎指正。 目录 grub是什么？ grub有哪些配置文件？ 各配置文件区别 配置文件生成流程 配置文件有哪些内容？…
阅读更多...
【Nature子刊】最争气国人友好“灌水刊”，中科院3区升2区，录用仅1个月，2天见刊！

【Nature子刊】最争气国人友好“灌水刊”，中科院3区升2区，录用仅1个月，2天见刊！

本周投稿推荐 SSCI • 中科院2区，6.0-7.0（录用友好） EI • 各领域沾边均可（2天录用） CNKI • 7天录用-检索（急录友好） SCI&EI • 4区生物医学类，0.5-1.0（录用…
阅读更多...
Android Studio | 小白如何运行别人的安卓项目

Android Studio | 小白如何运行别人的安卓项目

目录 Step1：正确地打开项目 Step2：AS 同步时报错 Step3：同步完成后启动 Step4：启动成功 说明：本文简称 Android Studio 为 AS Step1：正确地打开项目 重点：确认好项目的根目录是哪个目录&am…
阅读更多...
TCL电视销量蝉联全球第二，打出美洲杯欧洲杯营销王牌

TCL电视销量蝉联全球第二，打出美洲杯欧洲杯营销王牌

四年一度的欧洲杯即将于6月14日至7月14日在德国举办。作为全球顶级的足球赛事，欧洲杯不仅受到全世界球迷的瞩目，同样赢得了中国品牌的青睐。 近日，TCL宣布成为德国、西班牙、意大利、波兰、斯洛伐克5支国家队的官方合作伙伴，携手…
阅读更多...
idea插件开发之定义侧边栏

idea插件开发之定义侧边栏

写在前面 看下如何在侧边栏定义窗口，如下的效果： 1：正戏 先来定义UI，随便拖拽个组件，就看个效果： 接着定义一个工厂类来创建这个UI，需要实现接口com.intellij.openapi.wm.ToolWindowFactor…
阅读更多...
零基础非科班也能掌握的C语言知识20 文件操作

零基础非科班也能掌握的C语言知识20 文件操作

文件操作 1.文件相关概念2.流和标准流2.1流2.2标准流 3.文件指针4.文件的打开关闭5.文件的顺序读写6.文件的随机读写6.1 fseek6.2 ftell6.3 rewind 7.⽂件读取结束的判定7.1 feof 8.文件缓冲区 1.文件相关概念 2.流和标准流 2.1流 我们程序的数据需要输出到各种外部设备&…
阅读更多...
4 最简单的 C 程序设计—顺序程序设计-4.1 Ｃ语句概述-C程序的结构

4 最简单的 C 程序设计—顺序程序设计-4.1 Ｃ语句概述-C程序的结构

C 语句可分为以下五类： 1) 表达式语句 2) 函数调用语句 3) 控制语句 4) 复合语句 5) 空语句 当然，C语言中的确可以按照您列举的这五种类别来划分语句。下面我将分别给出每个类别的一些典型代码案例： 1. 表达式语句 表达式语句是最基本的语…
阅读更多...
【CTF-Events】R3CTF/YUANHENGCTF 2024 两道密码题记录一下

【CTF-Events】R3CTF/YUANHENGCTF 2024 两道密码题记录一下

R3CTF2024 WP 文章目录 R3CTF2024 WPCryptoR0System考点：代码审计 ECDH R1System考点：代码审计 ECDH Crypto R0System 考点：代码审计 ECDH 打开代码后有两个小系统，看一下功能 然后再看一下登录之后有哪些功能 其实到这里就可以…
阅读更多...
服务器端口，服务器远程端口修改操作

服务器端口，服务器远程端口修改操作

在进行服务器端口和远程端口的修改操作时，必须确保具备相应的网络知识和实践经验，以避免因操作不当而导致的数据丢失或网络故障。下面将详细阐述这一操作的流程和注意事项。 一、端口修改操作前准备 1. 深入了解当前网络环境和配置，包括服务…
阅读更多...
在微信小程序中安装和使用vant框架

在微信小程序中安装和使用vant框架

目录 1、初始化项目2、安装vant相关依赖3、修改 app.json4、修改 project.config.json5、构建npm6、使用示例 本文将详细介绍如何在微信小程序中安装并使用vant框架～ 开发工具：微信开发者工具 1、初始化项目 从终端进入小程序项目目录，执行…
阅读更多...
24年中级会计考试报名明天开始啦，速速查收报名流程！

24年中级会计考试报名明天开始啦，速速查收报名流程！

😭😭姐妹们！24年中级会计明天就要开始报名了！距离24年中级会计考试还有90天时间，还没开始备考的姐妹们真的要紧张起来了！今天给大家整理了一份24中级会计详细报名流程&各地报名时间，附备考工…
阅读更多...
16. 《C语言》——【牛客网BC124 —— BC130题目讲解】

16. 《C语言》——【牛客网BC124 —— BC130题目讲解】

亲爱的读者，大家好！我是一名正在学习编程的高校生。在这个博客里，我将和大家一起探讨编程技巧、分享实用工具，并交流学习心得。希望通过我的博客，你能学到有用的知识，提高自己的技能，成为一名优…
阅读更多...
jvm学习笔记(一) ----- JAVA 内存

jvm学习笔记(一) ----- JAVA 内存

JAVA 内存 一、程序计数器二、虚拟机栈三、本地方法栈四、堆五、非JAVA内存(堆外内存)1.元空间(Metaspace)2.直接内存 链接: jvm学习笔记(二) ----- 垃圾回收 链接: jvm学习笔记(三) ----- 垃圾回收器 一、程序计数器 虚拟机需要通过『程序计数器』记录指令执行到哪了。线程要…
阅读更多...
关于LayUI弹出层请求一次其他网页后无法再次点击按钮问题

关于LayUI弹出层请求一次其他网页后无法再次点击按钮问题

问题描述 使用layer弹出层去请求另一个页面，关闭弹窗后本页面按钮无法点击也不报错,如下面弹窗代码 layer.open({type: 1,area: [500px, 400px],title: 编辑信息,shade: 0.6,shadeClose: true,maxmin: false,anim: 0,success: function (layero, index) {$.ajax({u…
阅读更多...
【代码随想录】【算法训练营】【第35天】 [1005]K次取反后最大化的数组和 [134]加油站 [135]分发糖果

【代码随想录】【算法训练营】【第35天】 [1005]K次取反后最大化的数组和 [134]加油站 [135]分发糖果

前言 思路及算法思维，指路 代码随想录。 题目来自 LeetCode。 day 35，连休两天~ 题目详情 [1005] K次取反后最大化的数组和 题目描述 1005 K次取反后最大化的数组和 解题思路 前提：数组 思路：优先负数取反，未…
阅读更多...
汇编语言作业（七）

汇编语言作业（七）

目录 一、实验目的 二、实验内容 三、实验步骤以及结果 四、实验总结 一、实验目的 熟悉无符号数和有符号数乘法和除法指令的使用掌握无符号位扩展指令的使用掌握逻辑指令的使用 二、实验内容 1、编写一个汇编程序，要求从键盘中输入一个小写字母，将其转…
阅读更多...
性价比之选！W830NB降噪耳机高性能配置，探底价309元起

性价比之选！W830NB降噪耳机高性能配置，探底价309元起

目录 一、降噪技术的革新：-45dB深度沉浸 二、超长续航，乐动不停歇 三、音质的极致追求：Hi-Res双金标认证 四、空间音频与低延迟游戏模式 五、人性化设计与智能互联 六、总结 在这个快节奏的时代，寻找一片属于自己的宁静空间…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023