vue-admin-template을 사용한 최적화 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

vue-admin-template을 사용한 최적화 단계에 대한 자세한 설명

php中世界最好的语言

May 28, 2018 pm 03:06 PM

단계 상해

이번에는 vue-admin-template을 사용하기 위한 최적화 단계에 대해 자세히 설명하고, vue-admin-template을 사용하여 최적화할 때 주의사항은 무엇인지 살펴보겠습니다. .

머리말

회사에는 백엔드 관리 시스템을 갖춘 여러 프로젝트가 있습니다. 개발을 촉진하기 위해 우리는 Vue에서 인기 있는 백엔드 템플릿을 개발용 기본 템플릿으로 선택했습니다. 그러나 사용을 시작했을 때 작성자는 이를 최적화하지 않았습니다. 프로젝트가 온라인에 접속했을 때 패키지 파일이 매우 크고 한 공급업체의 볼륨이 770k라는 것을 발견했습니다(아래 그림은 기본 템플릿입니다. 패키지 파일 정보 추가 없이):

webpack-bundle-analyzer 분석을 통해 얻을 수 있습니다. 볼륨은 주로 Ele.me UI(볼륨은 500k)에서 가져옵니다. 분할 구성 요소를 부분적으로 도입하지 않으면 webpack이 전체 구성 요소 라이브러리를 패키징하게 됩니다. 두 번째는 80k 크기의 vue 자체입니다. webpack-bundle-analyzer 进行分析可得，体积主要来源于饿了么UI（体积为 500k），因为没对其进行部分引入拆分组件，导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身，体积也达到了 80k 之大。

所以，对其进行打包优化，是一件刻不容缓的事情。

优化

优化主要目的有：

加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。
加快打包速度，不要将时间浪费在等待打包上。

解决第一个问题，很多人都会想到资源文件放在 CDN 上就好了，没错，这次我们就是通过 CDN 来解决加载问题。

CDN - 提高加载速度

像 vue， element ui 这些比较成熟的框架/组件库，一般都有免费、高速、公共的 cdn 供开发者使用，鉴于大部分用户均在国内，所以这次使用了 bootcdn 这个库。该库热门资源比较齐全，各个版本都有，而且国内访问速度很快，简直是开发者的福音。

在 index.html 中引入 vue 和饿了么组件。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-admin-template</title>
  <!-- 同时也要引入对应版本的 css -->
  <link href="https://cdn.bootcss.com/element-ui/2.3.2/theme-chalk/index.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <!-- 先引入 Vue -->
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcss.com/element-ui/2.3.2/index.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js"></script>
 </body>
</html>

로그인 후 복사

因为依赖是从外部引入的，所以需要告知 webpack 在打包时，依赖的来源。

修改 webpack.base.conf.js：

module.exports = {
 ...
 externals: {
  vue: 'Vue',
  'element-ui':'ELEMENT'
 }
}

로그인 후 복사

再一次打包，确实能极大的压缩了打包的体积，从 700k 骤减至 130k：

但是随之而来的就有问题了：

明明我在本地开发，但是由于引入了线上的生产版本的 vue 文件，因此 vue-dev-tools 就不能进行调试。

因此，我们需要再次调整一下 webpack 的配置，webpack.base.conf.js，而且 webpack 注入的 js 总是在最后面的，因此，我们需要 html-webpack-include-assets-plugin 帮忙在注入 app.js 后，再注入相对应的组件库 :

const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
const externals = {
 // 因为打包时，还没注入，所以这里要去掉。
 // 'element-ui':'ELEMENT'
}
// 生产环境中使用生产环境的 vue
// 开发环境继续使用本地 node_modules 中的 vue
if (process.env.NODE_ENV === 'production') {
 externals['vue'] = 'Vue'
 // 如发现打包时依旧将 element-ui 打包进入 vendor，可以在打包时将其加入外部依赖。
 externals['element-ui'] = 'ELEMENT'
}
// 生产环境默认注入 vue 
// 开发环境中不注入
const defaultJS = process.env.NODE_ENV === 'production' ? [{ path: 'https://cdn.bootcss.com/vue/2.4.2/vue.min.js', type: 'js' }] : []
const plugins = [
 new HtmlWebpackIncludeAssetsPlugin({
   assets: defaultJS.concat([
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/index.js', type: 'js' },
    { path: 'https://cdn.bootcss.com/element-ui/2.3.2/locale/zh-CN.min.js', type: 'js' },
   ]),
   // 是否在 webpack 注入的 js 文件后新增？true 为 append, false 为 prepend。
   // 生产环境中，这些 js 应该先加载。
   append: process.env.NODE_ENV !== 'production',
   publicPath: '',
  })
]
module.exports = {
 ...
 externals,
 plugins,
 ...
}

로그인 후 복사

OK，这时候，既能兼顾打包后的体积大小，也能在开发模式中使用 vue-dev-tool 进行调试。

DLL - 提高打包速度

经常打包的前端会发现，很多时候，我们为了修复某些bug（如 promise 在 ie Safari 下的 bug），而新引入了一个 polyfill，然而，打包完后发现，vendor 的 hash 值变了，而整个 vendor 只新加了一个 es6-promise

그러니까, 한번 해보세요 패키징 최적화가 시급한 문제입니다. 🎜🎜🎜🎜Optimization🎜🎜🎜🎜최적화의 주요 목적은 다음과 같습니다. 🎜

🎜리소스 로딩 속도를 높이고 사용자 대기 시간을 줄이며 홈페이지 흰색 화면 시간을 절약하고 사용자 경험을 향상시킵니다. 🎜
🎜포장 속도를 높이고 포장을 기다리는 데 시간을 낭비하지 마세요. 🎜

🎜첫 번째 문제를 해결하기 위해 많은 사람들은 리소스 파일을 CDN에 배치할 수 있다고 생각할 것입니다. 네, 이번에는 CDN을 통해 로딩 문제를 해결하겠습니다. 🎜🎜🎜🎜CDN - 로딩 속도 향상🎜🎜🎜🎜vue 및 element ui와 같은 보다 성숙한 프레임워크/구성 요소 라이브러리에는 일반적으로 대부분의 사용자가 중국에 있다는 점을 고려하여 개발자가 사용할 수 있는 무료 고속 공개 CDN이 있습니다. , 그래서 이번에는 bootcdn 라이브러리를 사용했습니다. 이 라이브러리의 인기 있는 리소스는 비교적 완벽하고 다양한 버전으로 제공되며 국내 액세스 속도가 매우 빠르다는 점은 개발자에게 좋은 소식입니다. 🎜🎜vue 및 Ele.me 구성 요소를 index.html에 도입하세요. 🎜

const webpack = require('webpack');
const path = require('path');
const vueLoaderConfig = require('./vue-loader.conf')
const utils = require('./utils')
function resolve(dir) {
  return path.join(dirname, '..', dir)
}
const vendor = [
  // 'vue/dist/vue.runtime.esm.js', // 由于 vue 在生产环境中使用的是 cdn 引入，所以也无需提前打包进 dll
  // 'raven-js', // 前端监控，若无此需求，可以忽略。
  'es6-promise', // 修复 promise 中某些 bug。
  'vue-router',
  'js-cookie',
  'axios',
  'vuex',
];
const webpackConfig = {
  context: dirname,
  output: {
    path: path.join(dirname, '../static/js/'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  entry: {
    vendor
  },
  plugins: [
    new webpack.DllPlugin({
      context: dirname,
      path: path.join(dirname, '.', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
       warnings: false
      },
      sourceMap: true,
      // parallel: true
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
};
module.exports = webpackConfig

로그인 후 복사

🎜종속성은 외부에서 유입되기 때문에 웹팩 패키징 시 종속성 소스를 알려줘야 합니다. 🎜🎜 webpack.base.conf.js 수정: 🎜

{
  "scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
    ...
  }
}

로그인 후 복사

🎜다시 압축하면 패키지 크기가 700k에서 130k로 크게 압축될 수 있습니다. 🎜🎜

🎜🎜하지만 문제가 있습니다:🎜 🎜

🎜🎜분명히 로컬에서 개발을 하고 있지만, 온라인 제작의 도입으로 인해 vue 파일 버전에서는 vue-dev-tools를 디버깅할 수 없습니다. 🎜🎜따라서 webpack 구성을 다시 조정해야 하는데, webpack.base.conf.js이고, webpack에 의해 주입된 js는 항상 마지막에 있으므로 html-webpack이 필요합니다 - include-assets-plugin은 app.js를 삽입한 다음 해당 구성 요소 라이브러리를 삽입하는 데 도움이 됩니다. 🎜

yarn build:dll
yarn run v1.5.1
$ webpack --config build/webpack.dll.conf.js
Hash: f6894dff019b2e0734af
Version: webpack 3.10.0
Time: 1295ms
     Asset   Size Chunks       Chunk Names
vendor.dll.js 62.6 kB    0 [emitted] vendor
  [8] dll vendor 12 bytes {0} [built]
  + 32 hidden modules
✨ Done in 1.89s.

로그인 후 복사

🎜이제 패키지 크기를 고려할 수 있습니다. 또한 개발 모드에서 디버깅하려면 vue-dev-tool을 사용하세요. 🎜🎜🎜🎜DLL - 패키징 속도 향상 🎜🎜🎜🎜 패키징을 자주 하는 프런트 엔드에서는 특정 버그(예: IE Safari의 Promise 버그)를 수정하기 위해 새로운 폴리필을 도입합니다. 완료 후 벤더의 해시 값이 변경되었으며 전체 벤더가 es6-promise라는 새 종속성을 추가했을 뿐이지만 지불된 대가는 이전에 패키지된 벤더를 폐기해야 한다는 것입니다. . 사용자가 다시 방문하면 새로운 공급업체를 다시 가져와야 하는데 이는 약간 비용이 많이 듭니다. 🎜🎜이때 dllPlugin 패키징을 사용하면 장점이 있습니다. 일부 기본 종속 모듈을 먼저 함께 패키징할 수 있습니다. 공식적으로 패키징할 때 이러한 모듈을 건너뛰고 더 이상 공급업체에 반복적으로 패키징할 수 없습니다. 이렇게 하면 패키징 속도가 향상되고 공급업체의 규모도 줄어듭니다. 🎜

如，后台管理系统基础模块基本有以下几个：

axios： ajax 请求。
vuex：全局状态管理。
js-cookie：前端处理 cookie
vue-router：路由管理。

这四个基础模块几乎是必须的，那么可以先提取出来。

step 1 打包基础模块

先在 build 文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js：

const webpack = require('webpack');
const path = require('path');
const vueLoaderConfig = require('./vue-loader.conf')
const utils = require('./utils')
function resolve(dir) {
  return path.join(dirname, '..', dir)
}
const vendor = [
  // 'vue/dist/vue.runtime.esm.js', // 由于 vue 在生产环境中使用的是 cdn 引入，所以也无需提前打包进 dll
  // 'raven-js', // 前端监控，若无此需求，可以忽略。
  'es6-promise', // 修复 promise 中某些 bug。
  'vue-router',
  'js-cookie',
  'axios',
  'vuex',
];
const webpackConfig = {
  context: dirname,
  output: {
    path: path.join(dirname, '../static/js/'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  entry: {
    vendor
  },
  plugins: [
    new webpack.DllPlugin({
      context: dirname,
      path: path.join(dirname, '.', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
       warnings: false
      },
      sourceMap: true,
      // parallel: true
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
};
module.exports = webpackConfig

로그인 후 복사

然后在 package.json 中加入一条命令：

{
  "scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js",
    ...
  }
}

로그인 후 복사

执行 yarn build:dll 或者 npm run build:dll 即可完成打包 dll。执行完成后：

yarn build:dll
yarn run v1.5.1
$ webpack --config build/webpack.dll.conf.js
Hash: f6894dff019b2e0734af
Version: webpack 3.10.0
Time: 1295ms
     Asset   Size Chunks       Chunk Names
vendor.dll.js 62.6 kB    0 [emitted] vendor
  [8] dll vendor 12 bytes {0} [built]
  + 32 hidden modules
✨ Done in 1.89s.

로그인 후 복사

同时，可以在 build 目录下，找到各个模块对应关系文件 vendors-manifest.json 和 static/js 下的 vendor.dll.js。

step 2 页面中引入 vendor

打包后的 dll 文件需要手动在 index.html 引入：

<p id="app"></p>
<!-- built files will be auto injected -->
<script src="static/js/vendors.dll.js"></script>

로그인 후 복사

step 3 告诉 webpack 使用 dllPlugin 进行打包

修改 build/webpack.prod.conf.js:

module.exports = {
  plugins: [
    ...
    new webpack.DllReferencePlugin({
      context: dirname,
      manifest: require('./vendor-manifest.json')
    }),
    ...
  ]
}

로그인 후 복사

再次打包：

$ yarn build:report
yarn run v1.5.1
$ npm_config_report=true node build/build.js
Hash: b4ff51852866ed865cfd
Version: webpack 3.10.0
Time: 6532ms
                       Asset    Size Chunks       Chunk Names
     static/js/manifest.42b9584a653aec2b9c5e.js   1.5 kB    5 [emitted] manifest
             static/img/404.a57b6f3.png  98.1 kB     [emitted]
        static/js/1.9e4133a25808e2101dd3.js    1 kB    1 [emitted]
        static/js/2.2a8a8e01c51473fab882.js  4.34 kB    2 [emitted]
      static/js/vendor.c7b076ef3341d4711402.js  39.4 kB    3 [emitted] vendor
       static/js/app.6d52c7a5bf1bacb5cc85.js  21.4 kB    4 [emitted] app
        static/js/0.cbc645864aab28ae8055.js  15.3 kB    0 [emitted]
static/css/app.1b30f8eba210e245a5f96d7bf0d6fb6c.css   7.6 kB    4 [emitted] app
                    favicon.ico  67.6 kB     [emitted]
                     index.html 986 bytes     [emitted]
              static/js/vendor.dll.js  62.6 kB     [emitted]
 Build complete.
 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won't work.

로그인 후 복사

发现 vendor 现在只有 40k 的体积，减少了一半的体积，而且打包速度也快了 2s，而相对于最开始的基础模板，打包速度快了 12s，这是很让人欣慰。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7562

Cakephp 튜토리얼

1384

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Apr 17, 2024 pm 07:34 PM

iPhone의 기본 지도는 Apple의 독점 위치 정보 제공업체인 지도입니다. 지도가 점점 좋아지고 있지만 미국 이외의 지역에서는 잘 작동하지 않습니다. Google 지도와 비교하면 아무것도 제공할 수 없습니다. 이 기사에서는 Google 지도를 사용하여 iPhone의 기본 지도로 만드는 실행 가능한 단계에 대해 설명합니다. iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Google 지도를 휴대전화의 기본 지도 앱으로 설정하는 것은 생각보다 쉽습니다. 아래 단계를 따르십시오. – 전제 조건 단계 – 휴대폰에 Gmail이 설치되어 있어야 합니다. 1단계 – AppStore를 엽니다. 2단계 – “Gmail”을 검색하세요. 3단계 - Gmail 앱 옆을 클릭하세요.

최신 버전의 WeChat으로 업그레이드하는 단계(최신 버전의 WeChat으로 업그레이드하는 방법을 쉽게 익히세요)

WeChat은 더 나은 사용자 경험을 제공하기 위해 지속적으로 새 버전을 출시하는 중국의 소셜 미디어 플랫폼 중 하나입니다. WeChat을 최신 버전으로 업그레이드하는 것은 가족 및 동료와 연락을 유지하고 친구와 연락을 유지하며 최신 개발 상황을 파악하는 데 매우 중요합니다. 1. 최신 버전의 기능과 개선 사항을 이해합니다. WeChat을 업그레이드하기 전에 최신 버전의 기능과 개선 사항을 이해하는 것이 매우 중요합니다. 성능 개선 및 버그 수정에 대해서는 WeChat 공식 웹사이트나 앱 스토어에서 업데이트 노트를 확인하여 새 버전에서 제공되는 다양한 새로운 기능에 대해 알아볼 수 있습니다. 2. 현재 WeChat 버전 확인 WeChat을 업그레이드하기 전에 현재 휴대폰에 설치된 WeChat 버전을 확인해야 합니다. WeChat 애플리케이션 "나"를 클릭하여 연 다음 "정보" 메뉴를 선택하면 현재 WeChat 버전 번호를 볼 수 있습니다. 3. 앱을 엽니다

이 Apple ID는 iTunes Store에서 아직 사용되지 않습니다. 수정 Jun 10, 2024 pm 05:42 PM

AppleID를 사용하여 iTunesStore에 로그인하면 "이 AppleID는 iTunesStore에서 사용되지 않았습니다"라는 오류가 화면에 표시될 수 있습니다. 걱정할 오류 메시지는 없습니다. 다음 솔루션 세트에 따라 문제를 해결할 수 있습니다. 수정 1 – 배송 주소 변경 iTunes Store에 이 메시지가 나타나는 주된 이유는 AppleID 프로필에 올바른 주소가 없기 때문입니다. 1단계 – 먼저 iPhone에서 iPhone 설정을 엽니다. 2단계 – AppleID는 다른 모든 설정보다 우선해야 합니다. 그러니 열어보세요. 3단계 – 거기에서 “결제 및 배송” 옵션을 엽니다. 4단계 – Face ID를 사용하여 액세스 권한을 확인하세요. 단계

iPhone에서 Shazam 앱이 작동하지 않음: 수정 Jun 08, 2024 pm 12:36 PM

iPhone의 Shazam 앱에 문제가 있나요? Shazam은 노래를 듣고 노래를 찾는 데 도움을 줍니다. 하지만 Shazam이 제대로 작동하지 않거나 노래를 인식하지 못하는 경우 수동으로 문제를 해결해야 합니다. Shazam 앱을 복구하는 데 시간이 오래 걸리지 않습니다. 따라서 더 이상 시간을 낭비하지 않고 아래 단계에 따라 Shazam 앱 문제를 해결하세요. 수정 1 – 굵은 텍스트 기능 비활성화 iPhone의 굵은 텍스트로 인해 Shazam이 제대로 작동하지 않을 수 있습니다. 1단계 – iPhone 설정에서만 이 작업을 수행할 수 있습니다. 그러니 열어보세요. 2단계 – 다음으로 "디스플레이 및 밝기" 설정을 엽니다. 3단계 - "굵은 텍스트"가 활성화된 경우

Win11 시스템 관리자 권한을 얻는 단계에 대한 자세한 설명 Mar 08, 2024 pm 09:09 PM

Windows 11은 Microsoft가 출시한 최신 운영체제로 사용자들에게 큰 사랑을 받고 있습니다. Windows 11을 사용하는 과정에서 권한이 필요한 일부 작업을 수행하기 위해 시스템 관리자 권한을 얻어야 하는 경우가 있습니다. 다음으로 Windows 11에서 시스템 관리자 권한을 얻는 단계를 자세히 소개하겠습니다. 첫 번째 단계는 "시작 메뉴"를 클릭하는 것입니다. 왼쪽 하단에 있는 Windows 아이콘을 클릭하여 "시작 메뉴"를 엽니다. 두 번째 단계에서 '를 찾아서 클릭하세요.

iPhone 스크린샷이 작동하지 않음: 해결 방법 May 03, 2024 pm 09:16 PM

iPhone에서 스크린샷 기능이 작동하지 않나요? 스크린샷을 찍는 것은 매우 쉽습니다. 볼륨 높이기 버튼과 전원 버튼을 동시에 누르고 휴대폰 화면을 잡기만 하면 됩니다. 그러나 장치에서 프레임을 캡처하는 다른 방법이 있습니다. 수정 1 – 보조 터치 사용 보조 터치 기능을 사용하여 스크린샷을 찍습니다. 1단계 – 휴대폰 설정으로 이동합니다. 2단계 – 다음으로 탭하여 접근성 설정을 엽니다. 3단계 – 터치 설정을 엽니다. 4단계 – 다음으로 보조 터치 설정을 엽니다. 5단계 – 휴대폰에서 Assistive Touch를 켜세요. 6단계 – “상위 메뉴 사용자화”를 열어서 접근하세요. 7단계 – 이제 이러한 기능 중 하나를 화면 캡처에 연결하기만 하면 됩니다. 그러니 첫 번째를 클릭하세요.

iPhone에 시계 앱이 없습니다. 해결 방법 May 03, 2024 pm 09:19 PM

휴대폰에 시계 앱이 없나요? 날짜와 시간은 iPhone의 상태 표시줄에 계속 표시됩니다. 그러나 시계 앱이 없으면 세계 시계, 스톱워치, 알람 시계 및 기타 여러 기능을 사용할 수 없습니다. 따라서 누락된 시계 앱을 수정하는 것이 해야 할 일 목록의 맨 위에 있어야 합니다. 이러한 솔루션은 이 문제를 해결하는 데 도움이 될 수 있습니다. 수정 1 - 시계 앱 배치 실수로 홈 화면에서 시계 앱을 제거한 경우 시계 앱을 다시 제자리에 배치할 수 있습니다. 1단계 – iPhone을 잠금 해제하고 앱 라이브러리 페이지에 도달할 때까지 왼쪽으로 스와이프합니다. 2단계 – 다음으로 검색창에 “시계”를 검색하세요. 3단계 – 검색 결과 아래에 “시계”가 표시되면 길게 누르고

iPhone의 Safari 확대/축소 문제: 해결 방법은 다음과 같습니다. Apr 20, 2024 am 08:08 AM

Safari에서 확대/축소 수준을 제어할 수 없으면 작업을 완료하는 것이 까다로울 수 있습니다. 따라서 Safari가 축소된 것처럼 보이면 문제가 될 수 있습니다. Safari에서 이 사소한 확대/축소 문제를 해결할 수 있는 몇 가지 방법은 다음과 같습니다. 1. 커서 확대: Safari 메뉴 표시줄에서 "디스플레이" > "커서 확대"를 선택합니다. 이렇게 하면 화면에 커서가 더 잘 보이도록 되어 제어가 더 쉬워집니다. 2. 마우스 이동: 간단해 보이지만 때로는 화면의 다른 위치로 마우스를 이동하기만 해도 자동으로 원래 크기로 돌아갈 수 있습니다. 3. 키보드 단축키 사용 수정 1 – 확대/축소 수준 재설정 Safari 브라우저에서 직접 확대/축소 수준을 제어할 수 있습니다. 1단계 – Safari에 있을 때

See all articles

vue-admin-template을 사용한 최적화 단계에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제